[리액트] React Hooks - useState, useEffect
리액트 컴포넌트 작성 방식에는
클래스형 컴포넌트와 함수형 컴포넌트가 있는데
Hooks는 함수형 컴포넌트 작성 방식이 되겠다.
기존의 리액트 함수형은 state와 라이프 사이클을 구현할 수 없어 아주 간단한 기능만을 수행했었는데,
Hooks가 등장하게 되면서 클래스형처럼 state와 라이프 사이클 구현이 가능하게 되었다.
hooks에서는 state가 바뀌면 함수가 통째로 재실행되기 때문에 조금 느릴 수 있다.
useState
useState는 class의 state와 동일하게 초기값을 지정해줄 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
function App() {
const [funcShow, setFuncShow] = useState(true);
const [classShow, setClassShow] = useState(true);
return (
<div className="container">
<h1>Hello World</h1>
<button type="button" onClick={() => setFuncShow(false)}>
remove func
</button>
<button type="button" onClick={() => setClassShow(false)}>
remove class
</button>
{funcShow ? <FuncComp initNumber={2}></FuncComp> : null}
{classShow ? <ClassComp initNumber={2}></ClassComp> : null}
</div>
);
}
|
cs |
- useState는 배열을 리턴하고 두 개의 값으로 이루어져 있다.
- [state, setState] 꼴로 선언해주고(관습적으로 이렇게 적는다고 한다.)
- useState를 쓰고 괄호 안에 초기값을 지정한다.
- class에서 this.state를 이용해 객체로 한번에 선언해준 것과 달리, 개별적으로 각각 선언해준다.
- 클래스형과 달리 render를 쓰지않고 바로 return을 쓴다.
- 메서드에서 setState를 써서 상태를 변경한다.
함수형 컴포넌트에 props를 넘겨줄 때는 객체로 받게 되므로 props.속성명와 같이 적는다.
useEffect
useEffect는 class의 라이프사이클과 비슷하다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
useEffect(() => {
console.log(
'func => useEffect number(componentDidMount & componentDidUpdate)' +
++funcId
);
document.title = number;
return function cleanup() {
console.log(
'useEffect number return (componentDidMount & componentDidUpdate)' +
++funcId
);
};
}, [number]);
|
cs |
useEffect는 componentDidMount, componentDidUpdate, componentWillUnmount가
모두 합쳐져 있는 함수다.
- 1번째 인수는 함수가 정의되며,
componentDidMount와 componentDidUpdate와 비슷한 기능을 한다. - 2번째 인수는 배열이며, 여기에는 useEffect를 실행하고 싶은 state를 넣어준다.
useEffect의 2번째 인자로 특정 인자를 배열 형태로 넘겨주면, 값이 변경되었을 때만 넘겨준 인자가 호출된다. - 빈 배열을 넣으면 처음 렌더링될 때 한 번만 실행된다.( = componentDidMount)
위 소스코드에서는 [number]라는 state가 변경이 되면 useEffect가 호출되고 그렇지 않으면 호출되지 않는다.
쉽게 말하면,
useEffect는 DidMount 기능은 무조건 기본적으로 수행을 하되,
배열 안에 값을 넣어주면 DidUpdate의 기능을 추가로 수행한다.
return은 componentWillUnmount 역할을 담당한다.
componentWillUnmount를 실행할 코드를 작성하면 된다.
위 소스코드에서는 return의 cleanup이라고 선언된 함수가 componentWillUnmount를 담당한다.
return에 작성하는 함수는 cleanup 함수라고 하며 컴포넌트가 업데이트가 되기 전에 이전 작업을 정리해주기 위해 작성한다.