부트캠프교육중/react80 [React] React.memo 원래 리액트에서는 바뀌지 않은 props까지 모두다 렌더링된다. React.memo는 react.js한테 prop이 바뀌지 않는다면 컴포넌트를 렌더링 하지 말라고 한다. 최적화기술이다!!! 기존코드 function DragabbleCard() { return ( ); } export default DragabbleCard; 바뀐코드 import React from "react"; function DragabbleCard() { return ( ); } export default React.memo(DragabbleCard); 2023. 9. 8. [React] Recoil 정리 Recoil은 Facebook에서 만든 React전용 상태 관리 라이브러리입니다. 상태관리 툴을 사용하면 state값들을 props로 계속 타고들어가지 않아도 되어 코드가 깔끔해집니다. 프로젝트의 규모가 커질수록 상태 관리 또한 필요성이 커지게 됩니다. 대표적인 상태관리툴로는 Redux, Mobx 등이 있습니다. 먼저 Recoil 패키지 설치합니다. npm install recoil recoil을 사용하기 위해서는 사용하고자하는 부모 컴포넌트에다 를 사용해야 합니다. (Recoil 초기연동할때 사용됩니다.) 리코일로 전역상태를 관리할 범위를 RecoilRoot 컴포넌트로 감싸줍니다. RecoilRoot는 리덕스나 컨텍스트의 Provider와 같은 역할을 합니다. index.tsx import React .. 2023. 9. 5. [React] Recoil 2편 value만 불러오고 싶을때 => useRecoilValue value와 변경 함수를 둘다 얻고 싶으면 => useRecoilState hook const value = useRecoilValue(toDoState); const modFn = useSetRecoilState(toDoState); const [value, modFn] = useRecoilState(toDoState); selector는 atom의 output을 변형시키는 도구이다. selector는 state를 가져다가 뭔가를 return 할거다. selector에는 key와 get function이 필요하다. get function은 인자로 객체를 받는데, 그 객체에는 get function이 들어가 있다. get function이 있어.. 2023. 9. 4. [React] Ts+eslint+prettier 기초셋팅설정 https://velog.io/@qhgus/React-ESLint-Prettier-Typescript-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0 React + ESLint + Prettier + Typescript 세팅하기 React + Prettier + ESLint + Typescript 세팅 velog.io 이거 블로그 보고 일단 ts+eslint+prettier설정했다 1. 일단 확장프로그램 설치 2. npm install eslint prettier --save-dev 3. npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev 이거 했는데 에러가 났다. 버전 문제인것 같았다. 4... 2023. 8. 29. 이전 1 2 3 4 5 ··· 20 다음
