HOOKS

개요

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.

Hooks가 제공하는 내장 API에는 useEffect와 useState가 있다.

1.useState

useState는 함수형 컴포넌트에서 상태값을 관리하게 해준다. initialState를 파라미터로 받고, state와 state를 변경할 setState함수를 반환한다.

기본구조

const [count, setCount] = useState(0);

useState가 반환하는 첫 번째 인자인 state와 두번째 인자인 setState를 비구조화 문법을 통해 count, setCount로 받아서 사용할 수 있게 된다.
setCount로 count state를 변경하면 렌더링이 다시 일어난다.

주의할 점은 클래스형 컴포넌트에서 setState를 하면 병합되지만, 함수형 컴포넌트에서는 이전 상태값을 지운다.

2. useEffect

useEffect는 컴포넌트의 상태값 변화에 따라 컴포넌트 내부에서 변경이 이루어져야 되는것들을 처리할 수 있다.
또한 React에서 제공하는 useEffect는 Side-Effect를 처리하기 위해 사용한다고 한다.
그렇다면 Side-Effect란 무엇일까?

2-1) Side-Effect란?
의료계에서 말하는 부작용의 의미는 아니고, 컴퓨터 공학에서 사용하는 다른 의미가 존재한다.

함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말한다.

React에서는 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 말한다.

대표적인 예로 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우, 일단 화면에 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다.

참고
https://ko.reactjs.org/docs/hooks-intro.html

https://wonyong-jang.github.io/react-redux/2021/05/21/React-useState-useEffect.html