React hook

[React] useReducer에 대해서 알아보자.

우리가 어떠한 상태를 관리할 때는 useState()를 사용해서 해왔지만, useState()는 컴포넌트 내부에서 이루어진다는 것이 있다. 그러기에, A 컴포넌트에서 B 컴포넌트로 상태 전달할 때의 어려움도 존재하였다. 이를 해결 하는 방법이 useReducer다. useReducer는 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리 시킬 수 있기에, 컴포넌트 바깥에 작성하거나, 다른 파일에서 작성 하고 불러와서 사용할 수도 있다. useReducer에서 reducer는 현재 상태(state)와 액션 객체(action)를 파라미터로 받아 새로운 상태를 반환하는 함수다. reducer에서 반환하는 상태는 곧 컴포넌트가 가지게 될 새로운 상태가 된다. 여기서 action은 상태를 업데이트를 하기 위한 정보..

[React] useMemo 사용하기.

useMemo useMemo는 컴포넌트의 성능을 최적화 할 수 있는, React의 대표적인 Hook으로, Memo는 Memoization을 의미한다. Memoization는 기존의 수행한 연산의 결과값을 어딘가에 저장해두고, 동일한 입력이 들어오면 재사용을 하는 프로그래밍 기법을 의미한다. React의 함수형 컴포넌트는 렌더링 -> Component 함수 호출, 모든 내부 변수의 초기화의 순서를 거치게 되기에, 아래의 예제에 있어서 item이라는 변수의 값은 항상 초기화 되기에, itemValue 함수는 항상 다시 호출된다. 지금은 가벼운 함수지만, 무거운 함수라면, 계속 다시 함수를 호출하는 것은 매우 비효율적이다. function Component(){ const value = itemValue() ..