[React] 리액트 훅(hooks) / useState / useEffect

React Hook( 리액트 훅 )

: 리액트 훅이란, 함수형 컴포넌트를 지원하기 위한 기능으로 '기존에 존재하고 있던 어떠한 기능에 갈고리처럼 끼어 들어가 수행되도록 하는 것' 을 뜻한다.

 

기본적으로 리액트 클래스형 컴포넌트에서는 아래와 같이 특정 라이프 사이클을 제어할 수 있는 기능들이 있다.

• ComponenetDidMount
• ComponenetWillUnMount,
• ComponentDidUpdate

하지만 함수형 컴포넌트에서는 라이프 사이클을 제어할 수 있는 기능이 따로 없었다.그렇기 때문에 특정 라이프 사이클에 실행되어야 하는 함수를 개발하는데에 어려움이 있었고, 리액트는 이러한 함수형 컴포넌트의 단점을 보완하기 위해 훅(Hook)을 도입하게 된다.

 

리액트 훅은 기본적으로 useState, useEffect, useMemo, useCallback 등의 다양한 훅을 지원하기도 하지만 사용자가 직접 커스텀 훅을 만들 수도 있다.

커스텀 훅을 만들 때에는 리액트 훅의 규칙에 따라 use-로 시작하도록 변수명을 짓는다. ( 훅이라는 것을 알 수 있도록 )

 

---

 

1) useState

useState는 함수형 컴포넌트에서 상태값을 관리하기 위해 사용하는 훅이다.

기본적으로 리액트에서는 useState를 통해 선언된 상태 값들이 바뀌게 되면 컴포넌트를 재 렌더링 하게 된다.

만약 컴포넌트 상의 데이터를 상태값으로 관리하지 않고 일반적인 변수 데이터로 사용하게 된다면 이 값이 바뀌더라도 리액트는 재 렌더링을 하지 않게 된다.

 

그렇게 되면 우리는 바뀐 데이터가 아닌 바뀌기 이전의 데이터만을 확인할 수 있게 된다.

만약 변경된 데이터를 컴포넌트에서 바로 확인하고 싶은 경우라면 우리는 해당 데이터를 useState로 선언하여 관리하면 된다.

 

기본적인 useState의 사용법은 아래의 코드를 통해 확인할 수 있다.

import {useState} from 'react'

// count는 관리하고자 하는 상태값이며, 0으로 초기화 된다.
// setCount를 통해서만 변경할 수 있다.
const [count,setCount] = useState(0);

// count 를 변경하는 방법
const plusCount = () => {
	setCount( count + 1 ); // count 값 변경
}

count의 값은 setCount 를 통해 변경할 수 있다.

하지만 useState를 사용할 때 주의해야 할 점은 리액트에서의 setState는 비동기로 작동한다는 것이다.

 

데이터가 바뀔 때마다 바로 렌더링이 이루어지는 것이 아니라 비동기로 처리되기 때문에 원하는 시점에 데이터가 바뀌지 않을 수도 있다.

 

---

2) useEffect

: useState와 더불어 가장 많이 사용하는 훅 중에 하나로 함수형 컴포넌트에서 사이드이펙트를 실행하기 위한 훅이다.

( useEffect는 Vue로 따져보자면 mounted와 unmounted, watch의 성격을 어느 정도 가지고 있다고 생각된다. )

useEffect( 이펙트 함수, 의존성 배열 ); // 기본적인 사용법

 

useEffect에서는 의존성 배열의 유무에 따라 이펙트 함수의 실행도 달라지게 되는데,

 

먼저 의존성 배열이 빈 값[]인 경우는 이펙트 함수가 mounted와 unmounted 시점에서 한 번씩만 실행되게 된다.

의존성 배열이 아예 없는 경우엔 mounted, unmounted 시점과 더불어 컴포넌트가 렌더링 될 때마다 이펙트 함수가 실행된다.

의존성 배열이 있다면 이펙트 함수는 mounted, unmounted 시점과 해당 의존성 배열의 데이터가 변경 될 때 마다 이펙트 함수가 실행되게 된다.

여기서 unmounted 시점에 사용할 이펙트 함수는 이펙트 함수 선언 내부에 return () => {} 함수를 추가해주면 된다.

 

아래의 코드를 통해 useEffect의 사용 형태를 알 수 있다.

// 1. 의존성 배열[deps] 이 빈 값인 경우 : mounted, unmounted 일 때 한번 씩만 작동한다.
useEffect(() => {
    console.log("mounted");
    return () => {
    	console.log("unmounted");
    }
}, []);

// 2. 의존성 배열[deps] 이 없는 경우 : mounted, unmounted, 컴포넌트가 렌더링 될 때 마다 실행된다.
useEffect(() => {
    console.log("mounted");
    console.log("rendering");
    return () => {
		console.log("unmounted");
    }
}); 
   
// 3. 의존성 배열[deps] 가 있는 경우 : mounted, unmounted, 의존성 배열의 값이 변경될 때마다 실행된다.
useEffect(() => {
    console.log("mounted");
    console.log("rendering");
    return () => {
    	console.log("unmounted");
    }
}, [user]); 
   
// 4. unmounted 시, 실행시키고 싶은 함수는 return () => {} 으로 선언한다.
useEffect(() => {
    return () => {
        console.log("unmounted");
    }
})