[TIL/React] Hooks, useState, useEffect

Hooks

state를 정의해서 사용하거나 컴포넌트의 생명주기에 맞춰 어떤 코드를 실행되도록 할 수 없는 함수 컴포넌트에 그러한 기능을 지원하기 위해 나온 것

리액트의 State와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것

훅을 사용하면 함수 컴포넌트도 클래스 컴포넌트의 기능을 모두 동일하게 구현할 수 있다.

1. 훅의 이름은 모두 `use`로 시작한다. 각 기능을 사용하겠다 의미이다.
2. 개발자가 커스텀 훅을 만들어서 사용할 수 있다. (이름 앞에 use를 붙이는 건 필수)

---

useState

가장 대표적으로 많이 사용되는 훅

함수 컴포넌트에서는 기본적으로 state라는 것을 제공하지 않으므로 클래스 컴포넌트처럼 state를 사용하고 싶다면 `useState()` 훅을 사용해야 함

const [변수명, set함수명] = useState(초깃값);

 

import React, { useState } from "react";

function Counter(props) {
	// count를 변수로 선언했기 때문에 Re-rendering이 일어나지 않음
	var count = 0;
	
	return (
		<div>
			<p>총 {count}번 클릭했습니다. </p>
			<button onClick={() => count++}>
				클릭
			</button>
		</div>
	);
}

 

 

import React, { useState } from "react";

function Counter(props) {
	// const [state로 선언된 변수, 해당 state의 set함수] = useState(0);
	const [count, setCount] = useState(0);
	
	return (
		<div>
			<p>총 {count}번 클릭했습니다. </p>
			<button onClick={() => setCount(count + 1)}>
				클릭
			</button>
		</div>
	);
}

 

클래스 컴포넌트에서는 setState() 함수 하나를 사용해서 모든 state 값 업데이트 가능
useState()를 사용하는 방법에서는 변수 각각에 대해 set 함수가 따로 존재함

---

useEffect

사이드 이펙트를 수행하기 위한 훅

React에서 말하는 사이드 이펙트는 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 등의 작업을 의미한다.

리액트의 함수 컴포넌트에서 사이드 이펙트를 실행할 수 있도록 해주는 훅이다.

클래스 컴포너트에서 제공하는 생명주기 함수인 `componentDidMount()`, `componentDidUpdate()`, `componentWillUnmount()`와 동일한 기능을 하나로 통합해서 제공하므로, `useEffect()` 훅만으로 위의 생명주기 함수와 동일한 기능을 수행할 수 있음

 

useEffect(이펙트 함수, 의존성 배열);

의존성 배열: 해당 이펙트가 의존하고 있는 배열인데, 배열 안에 있는 변수 중에 하나라도 값이 변경되었을 때 이펙트 함수가 실행 됨

기본적으로 이펙트 함수는 처음 컴포넌트가 렌더링 된 이후와 업데이트로 인한 재렌더링 이후에 실행된다.
만약 이펙트 함수가 언마운트 시에 단 한 번씩만 실행되게 하고 싶으면, 의존성 배열에 빈 배열 `[ ]`을 넣으면 된다.

 

의존성 배열 없이 useEffect()를 사용하면 `DOM이 변경된 이후에 해당 이펙트 함수를 실행하라`는 의미가 된다.

그래서 기본적으로 컴포넌트가 처음 렌더링 될 때를 포함해서 매번 렌더링 될 때마다 이펙트가 실행된다.

useEffect() 에서 리턴하는 함수는 컴포넌트가 마운트 해제될 때 호출된다.