React를 사용하면서 꼭 사용하게 되는
useState와 useEffect에 대해 알아볼 것이다. 그 전에 react Hook
이라는 것에 대해 먼저 알아보도록 하자.
react의 함수 구성요소는 다음과 같다.
const Example = (props) => {
// You can use Hooks here!
return <div />;
}
// 혹은
function Example(props) {
// You can use Hooks here!
return <div />;
}
Hooks
는 React v16.8에 새롭게 도입된 기능이다.
Hooks
는 함수형 컴포넌트에 state를 제공함으로써 상태 관련 로직의 재사용을 이전보다 훨씬 쉽게 만들어준다. 클래스형 컴포넌트의 문제점들을 해결하기 위해 나온 것이 바로 훅(Hooks)이다.
Hooks는 일반 JavaScript 함수
이다. 그래서 Hooks를 활용하는 Custom Hooks를 만들어 상태를 가지는 로직을 함수로 쉽게 분리할 수 있다.
이때 Hooks가 제공하는 내장 API에는 useEffect
와 useState
가 있다.
✏️ useState
useState
는 함수형 컴포넌트에서 상태값을 관리하게 해준다. initialState를 파라미터로 받고, state와 state를 변경할 setState함수를 반환한다.
기본 구조는 아래와 같다.
const [state, setState] = useState(initialState);
이때 배열 비구조화 문법을 이용해 받는 것이기 때문에, state와 setState의 이름은 임의로 정할 수 있다.
아래의 예시를 보자.
import { useState } from 'react';
const Example = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>{`count: ${count}`}</p>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
)
};
export default Example;
위 예시에서는 default값이 0인 count useState를 작성하였다. useState
가 반환하는 첫 번째 인자인 state
와 두번째 인자인 setState
를 비구조화 문법을 통해 count
, setCount
로 받아서 사용할 수 있게 된다.
-> setCount로 count state를 변경하면 렌더링이 다시 일어난다.
이때 주의할 점은 클래스형 컴포넌트에서 setStat를 하면 병합되지만, 함수형 컴포넌트에서는 이전 상태값을 지운다.
✏️ useEffect
useEffect
는 컴포넌트의 상태값 변화에 따라 컴포넌트 내부에서 변경이 이루어져야 되는 것들을 처리할 수 있다.
(리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.)
useEffect의 기본 구조는 아래와 같다.
import React, { useEffect } from 'react';
useEffect(() => {
console.log('마운트 될 때만 실행된다.');
}, []);
// useEffect( function, deps )
// function : 수행하고자 하는 작업
// deps : 배열 형태이며, 배열 안에서 검사하고자 하는 특정 값 or 빈 배열
첫번째 파라미터로 함수를 필요로 하고 두번째 파라미터로 배열형태의 값을 필요로 한다.
두번째 파라미터에는 보통 컴포넌트 state값이 들어가는데 배열에 포함된 값이 변경되었을 때 해당 useEffect
내부 로직이 실행된다.
useEffect(() => {
console.log('마운트 될 때만 실행된다.');
}, []);
두번째 파라미터로 빈 배열
을 넣는 경우 컴포넌트가 처음 렌더링 될때 (mount 될 때)만 실행
된다.
useEffect(() => {
console.log('렌더링 될 때 마다 실행된다.');
});
만약 두번째 파라미터에 배열을 생략
한다면 리렌더링 될 때 마다 실행
된다.
그렇다면 특정값이 업데이트 될 때 실행하고 싶을 때는 deps 배열 안에 검사하고 싶은 값을 넣어준다.
의존값이 들어있는 배열 deps(dependency)
이라고 한다.
이때 주의할 점은 업데이트 될 때만 실행하는 것이 아니라 마운트 될 때도 실행된다.
useEffect(() => {
console.log(name);
console.log('업데이트 될 때 실행된다.');
}, [name]);
마지막으로 useEffect
의 return 값이 있는 경우 hook의 cleanup 함수로 인식하고 다음 effect가 실행되기 전에 실행을 해준다.
🔍 어떠한 값의 변화를 감지하면, 실행되어 특정 함수나 작업을 실행하는 함수이다.
useEffect
는 Dependency
가 있던 없던, 대괄호
만 있던, 렌더링 후 useEffect는 무조건 한번은 실행된다.
useEffect(() => {}, [특정변수 혹은 오브젝트]);
대괄호 안에 지정된 변수 혹은 오브젝트가 변하지 않는다면, useEffect는 실행되지 않는다.