[React] Hook

리액트 훅은 컴포넌트에 기능을 추가할 때 사용하는 함수입니다. 예를 들면, 컴포넌트에 상태 값을 추가하거나 자식 요소에 접근하는 등의 기능을 추가하고 싶을 때 훅을 사용할 수 있습니다.

리액트 훅이 나오기 전에는 클래스형 컴포넌트를 사용했습니다. 훅이 등장하면서 클래스형 컴포넌트는 더이상 사용을 안해도 되는 상황이 됐습니다. 클래스형 컴포넌트보다 리액트 훅이 장점이 많고, 리액트 팀에서도 훅에 집중하고 있기 때문에, 훅으로 작성하는 것을 추천합니다.

클래스형 컴포넌트에 비해 리액트 훅을 사용하는 함수형 컴포넌트의 장점은 아래와 같습니다.

1. 함수형은 상태를 저장할 수 없습니다. 따라서 함수가 실행되고 나면 메모리에서 사라집니다.
2. 함수형 컴포넌트가 클래스형 컴포넌트보다 선언하기 편하고, 메모리 자원을 덜 사용한다는 장점을 갖습니다.
3. 훅은 로직과 상태를 분리할 수 있게 해주므로 로직의 재사용이 가능해집니다.

useState

useState 는 상태 값을 추가할 때 사용하는 훅입니다.

위 코드와 같이 상태값 변경 함수를 두 번 호출해, 버튼을 클릭할 때마다 count 를 2씩 증가시키려고 하면 어떻게 될까요?

위와 같이 상태값 변경 함수는 비동기면서 배치(batch) 로 처리되기 때문에 의도한 대로 동작하지 않습니다. 리액트는 효율적인 렌더링을 위해 여러 개의 상태 값 변경 요청을 배치로 처리합니다.

만약 리액트가 상태값 변경 함수를 동기로 처리하면 하나의 상태값 변경 함수가 호출될 때마다 화면을 다시 그리기 때문에 성능 이슈가 생길 수 있습니다. 만약 상태값 변경은 동기로 처리하고 매번 화면을 다시 그리지 않는다면 UI 데이터와 화면간의 불일치가 발생해 혼란이 생길 수 있습니다.

의도대로 작동 시키려면, 상태값 변경 함수에 함수를 사용하는 방법이 있습니다.

위와 같이 함수를 입력하면, 처리되기 직전의 상태값을 매개변수로 받기 때문에 원하는 대로 동작을 합니다.

여기서 onClick 이벤트 핸들러는 리액트 내부에서 관리되는 리액트 요소에 입력이 되어있기 때문에 배치로 처리되는 것입니다. 이렇게 하지 않고 리액트에서 관리하지 않는 외부에서 호출을 하는 경우에는 배치로 동작하지 않습니다. 이러한 경우에는 상태값 변경 함수를 호출할 때마다 렌더링이 이루어지게 됩니다.

아래와 같이 여러 개의 상태들을 하나의 객체를 활용해 관리할 수 있습니다.

하지만, 여러 개의 상태값을 관리할 때는 useState 보다는 useReducer 훅이 더 적합합니다.

useEffect

부수 효과를 처리할 때 사용하는 훅입니다. 부수 효과란 외부의 상태를 변경하는 것을 말합니다. 예를 들면, 서버 api를 호출한다거나 이벤트 핸들러를 등록하고 해제하는 등의 처리가 모두 부수 효과입니다.

useEffect 훅 내부 파라미터에서 작성된 함수는 컴포넌트가 렌더링된 후에 호출됩니다. 렌더링 결과가 실제 돔에 반영되고 비동기로 호출이 됩니다.

아래 코드를 실행해, 버튼을 클릭할 때마다 App 컴포넌트는 다시 렌더링이 될 겁니다. 따라서 렌더링 후에 useEffect 에 적힌 부수 효과도 실행이 됩니다.

useEffect 의 첫 번째 파라미터로 전달되는 함수를 부수 효과 함수 라고 부릅니다.