Hooks

리액트 16버전부터 도입된 기능으로, 함수형 컴포넌트에서도 상태 관리를 하고, 렌더링 직후 작업을 설정하는 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 기능을 할 수 있게 해준다.

useState

함수형 컴포넌트에서 가변적인 상태를 지닐 수 있게 해주며,
상태를 관리할 때 사용한다.

useRef

함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해준다.
useRef를 사용하여 ref를 설정하면 useRef를 통해 만든 객체 안의 current값이 실제 엘리먼트를 가르킨다.

useEffect

리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook
=> 클래스형 컴포넌트에서의 componentDidMount와 componentDidUpdate를 합친 형태

useMemo

함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있음.
ex) 숫자를 등록할 때 뿐만 아니라 인풋 내용이 수정될 때도 우리가 만든 함수가 호출되므로 인풋 내용이 바뀔 때 평균 값 다시 계산할 필요가 없는데 렌더링을 계속하면 시간낭비 이므로 useMemo를 사용하여 작업을 최적화한다.

useCallback

useMemo와 상당히 비슷한 함수로 렌더링 성능을 최적화한다.
만들어놨던 함수를 재사용할 수 있음.
useCallback(생성하고 싶은 함수, 배열) 로 매개변수를 넣어야함.

React.memo (function Component)

컴포넌트를 렌더링 한 뒤, 이전의 결과와 비교하여 Dom업데이트를 결정한다.
즉, 바뀐 값이 있을 때 렌더링된다.

React.pureComponent (class Component)

React.memo와 비슷하게, 클래스 컴포넌트에서 사용된다.
컴포넌트의 state 나 props 에 변화가 있으면 렌더링이 된다.
변화가 없으면 render 함수가 호출되지 않음.