나는 오늘도 멋있다

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

useMemo란? React에서 성능 최적화를 위해 사용되는 hook중 하나로, 이전에 계산된 함수호출 결과값을 메모제이션(memoization) 하여 불필요한 계산을 방지하여 렌더링성능(불필요한 렌더링 방지)을 향상시킨다 메모제이션(memooization): 이전에 계산된 값을 캐싱하여 동일한 입력에 대해 다시 계산을 수행하지않고 저장된 값을 반환 useMemo 왜 사용해야 할까? React의 함수형 컴포넌트는 해당 컴포넌트가 렌더링될 때마다 모든 내부 변수 및 함수가 초기화되기 때문에, 컴포넌트 내부에서 무거운 작업을 하여 값을 반환하는 함수가 있을때, 자주 변경되지않는 값이 렌더링마다 해당 함수를 호출하여 값을 반환하는것은 무의미한 반복 작업이다. useMemo는 이전에 계산된 결과값을 메모리에서꺼..