Land of Joe

React를 사용하다 보면 성능 최적화와 효율적인 상태 관리가 중요하다는 것을 알게 된다.메모이제이션과 관련된 다양한 Hook과 Context API, 그리고 useReducer에 대해 알아보고자 한다. 1. 메모이제이션 (Memoization)동일한 계산을 반복하지 않도록, 함수 호출의 결과를 저장하여 성능을 최적화하는 기법을 의미한다. 메모이제이션을 하기 위한 방법으로는 세 가지가 있다.콜백 함수를 메모이제이션 하는 useCallback 훅데이터 값을 메모이제이션 하는 useMemo 훅컴포넌트를 메모이제이션 하는 React.memo 함수💡 useCallback, useMemo 훅이 사용된 경우,의존성 배열(Dependency Array)에 의해서만 각각 함수와 값의 리랜더링을 진행하는데이때 의미 없..

학습 내용리액트의 불변성데이터 변화를 감지할 때 원본데이터의 참조값이 변경되지 않았다면 값이 업데이트되지 않았다고 생각함주소값 내부가 바뀌었더라도 주소값이 바뀌지 않으면 업데이트되지 않았다고 생각함기본자료형은 상관없는데 (값이 바뀔 때마다 새로운 데이터라고 인식하기 때문)배열이나 객체(참조자료형)를 바꿀 때엔 항상 새로운 배열, 객체로 생성할 것!랜더링 최적화 메모이제이션특정값, 데이터를 기억하도록 보관하는 작업훅 useCallback(() => {}, [])훅 useMemo(() => {}, [])함수 React.memo()언제 다시 메모이제이션 되고 풀리는가에 대해 알기useReducer하나의 상태값을 단 하나의 함수에서 관리하는 것이 목적Context APIprops drilling데이터를 관리하고..

오늘의 학습체크박스 컴포넌트 만들기두 가지 방법 : 1. label태그로 input태그 감싸기 2. input태그와 label태그 따로 쓰기label태그의 글자 클릭해도 체크박스가 동작하게 하는 방법 : input태그의 id속성값과 label태그의 for(리액트: htmlFor)값이 같으면 함께 동작함(테일윈드) appearence-none : 의 기본 디자인 제거조건부 랜더링반복 랜더링