react17 redux toolkit 라이브러리 설치 및 세팅 *아래의 프로젝트는 타입스크립트를 사용합니다. ts 를 사용하지 않는다면 js 파일로 만들어 주세용* 참고로 아래처럼 폴더를 만들어 파일을 넣어두는 것은 그저 편한 관리를 위한 것으로 공식 문서에서 권장하는 것이므로, 굳이 저렇게 안해도 제대로 로직만 잘쓰면 잘 돌아가긴 한당 그럼 일단 yarn으로 라이브러리 설치부터 하자 아래의 코드들을 터미널에 입력하여 라이브러리를 설치하자 yarn add @reduxjs/toolkit yarn add redux react-redux yarn add --dev @types/react-redux 그 후 프로젝트 폴더 내의 src 폴더에 store 폴더를 만든다 store 폴더 안에 hooks.ts 파일을 만들고 아래의 코드를 붙여 넣어주자 import { TypedUs.. 2022. 12. 14. react / typescript 프로젝트에 eslint, prettier 세팅하기 프로젝트를 진행하며, 리액트와 타입스크립트를 사용하는 프로젝트에 eslint와 prettier 를 세팅하는 방법을 정리하려 한다 1. 아래의 코드를 터미널에 입력하여 CRA (create-react-app) 로 타입스크립트 기반의 리액트 프로젝트를 생성한다 npx create-react-app 프로젝트폴더명 --template typescript 2. 터미널에 'cd 프로젝트폴더명' 을 입력하여 프로젝트 폴더로 이동하여 아래와 같이 eslint 라이브러리를 설치한다 (npm 말고 yarn 쓰자 npm 별로당) yarn add eslint 3. 프로젝트 폴더 내 최상위 경로에(package.json 과 같은 레벨) '.eslintrc.js' 파일을 생성하고 아래의 코드를 붙여넣어주자 module.expor.. 2022. 12. 14. [error] Component definition is missing display name useMemo 와 유사한 기능인 React 라이브러리의 memo 함수를 사용해보던 중 일어난 에러다 eslint 에서 또 한소리 하셨다 에러 원인 아래의 예처럼 React.memo 를 변수 Child에 저장하고 해당 변수를 console.log 로 찍어보면 const Child = memo(() => { console.log("재랜더링"); return 자식이래요; }); console.log(Child); 요런 객체를 확인 가능하다 memo 를 사용하면 위 그림의 displayName 속성에 memo 함수의 인자로 넣은 익명함수들이 들어가게 된다! 근데 왜인지 모르겠지만 displayName 의 값은 클릭해서 확인해보면 undefined 로 뜨고 에러가 나온다 해결 방법 아래의 코드를 추가해준다 Chi.. 2022. 12. 7. [react] state 는 setState 후 바로 수정되지 않는다! 컴포넌트에 클릭 시, check 라는 state 를 변경하는 버튼을 만들었다 근데... setCheck 수정 함수 뒤에 console.log 로 찍어보니 엥! 버튼 클릭 뒤에선 수정되지 않은 초기값 그대로잖아? 의심이 가는 부분이 있어서 useEffect 로 check 를 감시하여 콘솔로그로 찍어보았는데 useEffect 에는 check state의 변경이 제대로 적용이 되어있다 ??!! 아하? 그렇다! 저번에도 계속 말한 내용이지만 automatic Batching 에 의해서 바로 state 가 변경되지 않고, 컴포넌트 함수가 모두 실행되기 전까지는 state 변경 사항들을 적용하지 않는 것이다! state 가 변경 되고 나서야 useEffect 가 실행되어서 감시하는 state 가 있는지 등등의 us.. 2022. 12. 6. 이전 1 2 3 4 5 다음
