Hooks

hooks

함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공한다.

 

useState

가장 기본적인 hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있다. (사용법은 이미 익혔으니 생략)

 

useEffect

렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 hook이다. componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방하다.

만약 마운트 될때만 실행하고 싶다면 함수의 두 번째 파라미터로 비어 있는 배열을 넣어 주면 된다.

useEffect(() => {~~}, []);

특정 값이 업데이트될 때만 실행하고 싶다면 두 번째 파라미터에 검사하고 싶은 값을 넣어준다.

useEffect(() => {~~}, [name]);

언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 뒷부분에 cleanup 함수를 반환해준다.

useEffect(() => {~~ return () => { ~~~ } });

 

useReducer

useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다. 이 부분은 리덕스를 배울 때 자세히 알아보도록 하자.

 

useMemo

함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.

이 코드의 경우 input 내용이 수정될 때도 평균값을 계산할 필요가 없는데 getAverage 함수가 호출된다. 이런 문제를 useMemo hook을 사용해 최적화할 수 있다. 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하도록 하는 방식이다.

 

useCallback

useMemo와 비슷한 역할을 하는데 이벤트 핸들러 함수를 필요할 때만 생성할 수 있다. 

 

useRef

ref를 쉽게 사용할 수 있도록 해준다. enroll 버튼을 눌렀을 때 포커스가 input 쪽으로 넘어가도록 코드를 작성해보자.