나는 오늘도 멋있다

React.memo란? 부모로 부터 전달받은 Props의 상태변경이 일어나지 않았을때 불필요한 렌더링을 방지하는 API 오직 Props 변화에만 의존하는 최적화 방법 React.memo 왜 사용해야할까? React의 함수형 컴포넌트에서 상태가 변했을경우 컴포넌트는 리렌더링이 발생한다. 문제는 자식의 상태는 변경되는것이 없는 상황에서 부모컴포넌트의 상태가 변경됨으로써 자식은 불필요한 렌더링이 발생한다. 그렇기에 해당 자식이 부모에게 받는 props의 상태가 동일하다면 자식을 렌더링 하지 않도록 할수 있다. React.memo 구문 const ComponentName = memo(Component) Component: 부모에게 Props를 받는 컴포넌트 React.memo 동작방식 부모에게 받는 Props가..

useCallback이란? React에서 성능 최적화를 위해 사용되는 hook중 하나로, 함수자체를 메모제이션(memoization)하여 불필요한 함수 재생성을 방지하여 렌더링성능(불필요한 렌더링 방지)을 향상시킨다 useCallback 왜 사용해야할까? React의 함수형 컴포넌트는 해당 컴포넌트가 렌더링될 때마다 모든 내부 변수 및 함수가 초기화되기 때문에 함수또한 재생성을 하게된다. 여기서 함수는 참조타입을 가지므로 렌더링마다 다른 참조 주소를 가지게 되는데, 이러한 이유로 재생성 되는것을 useCallback을 통하여 최초 렌더링시에 참조주소를 유지를 하고, 이전함수를 사용하는 것 이다. useCallback 구문 useCallback(memooizationFunctuin,[dependencies..