heyday2024 님의 블로그

리-렌더링의 발생 조건컴포넌트에서 state가 바뀌었을 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두==> 리액트에서 리렌더링이 자주 발생한다?? 그것은 비효율적인 코드!! ==> 여기서 발생하는 cost를 최대한 줄여야 그 성능이 향상됨.  최적화(Optimization) 필요!! ==> 어떻게하면 불필요한 렌더링을 줄일 수있을까??memoization을 이용하자!!!1. memo(React.memo) : 컴포넌트를 캐싱 ( 고차 컴포넌트(Higher-Order Component, HOC) : 다른 컴포넌트를 받아서 새로운 컴포넌트를 반환하는 함수 )2. useCallback : 함수를 캐싱 (react hook) 3. useMemo : 값을 캐..

1. useStateuseState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해줌.  const [state, setState] = useState(initialState);- useState 라는 함수가 배열을 반환하고, 이것을 구조 분해 문법으로 꺼내놓은 모습.- 위 코드에서는 state를 변수로 사용했고, setState를 이용해서 state 값을 수정할 수 있었음.- 만약 state가 원시 데이터타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해줘야함.(spread operator 사용.)   1. 직접 새로운 값을 전달하기setState 함수에 직접 새로운 값을 전달하여 상태를 업데이트.이 경우, 이전 상태를 참조하지 않으므로 단순히 새로운 값을 설정하는 상황..