📌 React
-
[Redux] redux createStore 취소선과 해결 방법📌 React 2022. 10. 18. 16:36
문제 리덕스를 사용하려고 하는데 createStore 에 취소선이 그어져있다. import { createStore } from "redux"; const store = createStore(rootReducer, composeWithDevTools); import { createStore } from "redux"; const store = createStore(rootReducer, composeWithDevTools); 원인 이유는 createStore 를 더이상 사용하지 않기 때문이라고 한다. 위 설명에 따르면) createStore를 대체하는 @reduxjs/toolkit 패키지의 configureStore 메소드를 사용하는 것이 좋다. Redux 툴킷은 스토어 설정, 리듀서, 데이터 가져오기 ..
-
[React] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined 에러📌 React 2022. 10. 14. 09:25
문제 오래전에 작업하던 프로젝트에 yarn 설치를 하고 yarn start 를 하니 아래와 같이 에러 메시지가 떴다. TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined at new NodeError (node:internal/errors:371:5) at validateString (node:internal/validators:119:11) at Object.join (node:path:429:7) 원인 reac..
-
[React] Todolist 만들기 정리(3)📌 React 2022. 9. 29. 01:36
Context 를 만들어주었으니, 이제 Context 와 연동을 하여 기능을 구현하자. TodoHead.js Context 에 있는 state 를 받아와서 렌더링을 하고, 필요한 상황에는 특정 액션을 dispatch 하면 된다. TodoHead 에서는 done 값이 false 인 항목들의 개수를 화면에 보여준다. 추가로 날짜가 보여지는 부분을 작업해준다. import React from 'react'; import styled from 'styled-components'; import { useTodoState } from '../TodoContext'; const TodoHeadBlock = styled.div` padding-top: 48px; padding-left: 32px; padding-rig..
-
[React] Todolist 만들기 정리(2)📌 React 2022. 9. 28. 23:41
Todolist 만들기 정리(1) 에 이어서 작업을 할 예정이다. 이전 게시글에는 UI 작업이었다면 이번 편은 기능적인 것을 보여줄 것이다. 리듀서 만들기 useReducer 를 사용하여 상태를 관리하는 TodoProvider 라는 컴포넌트 생성한다. src/TodoContext.js import React, { useReducer } from 'react'; const initialTodos = [ { id: 1, text: '프로젝트 생성하기', done: true }, { id: 2, text: '컴포넌트 스타일링하기', done: true }, { id: 3, text: 'Context 만들기', done: false }, { id: 4, text: '기능 구현하기', done: false } ]..
-
[React] Todolist 만들기 정리(1)📌 React 2022. 9. 28. 00:04
벨로퍼트님의 https://react.vlpt.us/mashup-todolist/01-create-components.html 보고 직접 구현했던 과정들을 정리하려고 한다. cra설정 yarn create react-app react-todolist 이번 프로젝트에서 필요한 라이브러리 react-icons 와 styled-components 를 설치. $ cd react-todolist $ yarn add react-icons styled-components 컴포넌트 정리 TodoProvider useReducer 를 사용하여 상태를 관리하는 컴포넌트이다. TodoTemplate 투두리스트의 레이아웃을 설정하는 컴포넌트이다. 페이지 중앙에 그림자가 적용된 흰색 박스를 보여준다. TodoHead 오늘의 날..
-
[React] Context API📌 React 2022. 9. 27. 23:20
Context API 활용한 상태관리를 작업 중에 개념 정리의 필요성을 느꼈다. Context React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법. 사용하게 되면 중간에 있는 엘리먼트들에게 props를 넘겨주지 않아도 된다. 사용하기 전에 고려할 것 context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할 때만 써야한다. https://ko.reactjs.org/docs/context.html Context – React A JavaScript library for building user interfaces ko.reactjs.org
-
[React] 데이터를 저장하는 방법📌 React 2022. 9. 27. 20:46
변수에 데이터 넣기 변수( const, let )에 데이터를 넣는다. 매번 렌더링 될 때마다 다시 만들어진다. useState 1번째 마운트에서 초기화 됨. state 값이 변경되면 리렌더링 발생. ✨ react에서 리렌더링이 일어나는 경우? props, state가 변경되었을 때. useRef 1번째 마운트에서 초기화 됨. 값을 변경해도 리렌더링이 되지 않음. 더 나아가기 https://ui.toast.com/weekly-pick/ko_20211214
-