[React Hook] 1. Hooks (useState, useEffect)

Hooks는 리액트 16.8 버전에 신규로 추가된 기능이다. 클래스형 컴포넌트에서만 가능했던 state 및 다양한 기능을 코드작성 없이 라이브러리로 제공한다.

리액트에서는 클래스형 컴포넌트가아닌 함수형 컴포넌트에 훅을 사용하는것을 권장한다.

훅의 간단한 규칙이 있다.

• 최상위 컴포넌트에서만 호출 : 반복문 혹은 중첩된 함수 안에서 호출을 하게되면 버그가 발생할 수 있어 최상위 한개에서만 호출하는것을 권장한다. 이 규칙을 따르면 컴포넌트가 랜더링되는 순서대로 훅이 호출되는것을 보장한다.
• 리액트 함수 내에서만 호출 : 소스코드를 명확하게 하기 위해 일반 자바스크립트에서는 호출하지 않는다.

 

1. useState

 

useState는 가장 기본적인 훅이다. 함수형 컴포넌트에서 상태를 관리해야할 일이 있으면 useState를 활용하면 된다.

 

 

const [value, setValue] = useState(0);

위 코드의 뜻은 value라는 상태값에 useState를 통해 0으로 초기화를 시켰고, setValue라는 함수로 해당 상태를 변경한다는 의미이다.

+1을 누르면 setValue를 통해 현재 value + 1 으로 상태를 변경하고, -1을 누르면 value - 1 로 상태를 변경하는것을 볼 수 있다.

useState는 한개의 상태값만 관리하기 때문에 여러개를 관리하려면 여러개의 useState를 사용해야 한다.

 

2. useEffect

useEffect는 컴포넌트가 랜더링이 될 때 수행되는 훅이다.

이전 Counter.js에 useEffect를 추가하고 개발자도구를 확인하면 아래와 같다.

처음에 0이 두번 찍히고, 그 이후에 값이 변경될 때 마다 찍히게 된다.

 

(여기서 만약 초기에 useEffect가 한번씩 더 실행된다면 index.jsdp  React.StrictMode 태그를 지우자.
해당 태그의 역할은 추후 포스팅 예정이다.)

만약 useEffect를 쓰면서 특정값이 업데이트될 때 만 하고싶으면 아래와 같이 진행하면 된다.

 

보면 랜더링 완료는 한번만 호출이 되고 그 이후에는 value값이 변경될 때 마다 호출이 된다.

deps 부분은 의존성 배열로써, 해당 배열에 있는 값이 변경되면 호출이 되게 된다.

첫 번째 useEffect 처럼 deps에 빈 배열을 넣어 주게 되면 특정 값이 아닌 전체 컴포넌트에 대해 적용이 되게 되어 최초 1회만 호출이 되게 된다.

 

클린업 함수를 통해 초기화와 같은 전처리를 진행할 수 있다.
(예를 들면 신규 리스너에 연결 전 이전 리스너를 제거하는 등..)

 

로그르르 보면 값이 변경되기 직전에 클린업 함수가 실행되는것을 볼 수 있다.