Hooks-2

1. useEffect 기본 사용법

useEffect 는 리엑트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook 이다.

클래스형 컴포넌트의 componentDidMount, componentDidUpdate 를 합친것 이라고 생각해도 된다.

다음 파일을 새로 만든다.

앞선 포스트에서 useState를 하나만 썼다면 여기서는 2개를 사용해서 이름과 닉네임을 입력할 수 있다.

파일위치 : src/Info.js

1   import React, { useState } from "react";
2
3   const Info = () => {
4
5   const [name, setName] = useState("");
6   const [nickname, setNickname] = useState("");
7
8   const onChangeName = e => {
9       setName(e.target.value);
10   };
11   const onChangeNickname = e => {
12       setNickname(e.target.value);
13   };
14   return (
15       <div>
16       <div>
17           <input value={name} onChange={onChangeName} />
18           <input value={nickname} onChange={onChangeNickname} />
19       </div>
20       <div>
21           <div>
22           <b>이름 :</b>
23           {name}
24           </div>
25           <div>
26           <b>닉네임 :</b>
27           {nickname}
28           </div>
29       </div>
30       </div>
31      );
32   };

export default Info;

이곳에 이제 useEffect 를 사용해 볼 것이다.

useEffect(()=>{
    console.log('렌더링되었다.')
    console.log({
        name,
        nickname
    });
});

위 함수useEffect를 line7에 넣어주도록 해보자.

그러면 input 창에 값을 입력할 때마다 useEffect 함수가 실행되어 console.log가 찍힐 것이다.

• 렌더링될 때마다 (state가 변화될 때마다) useEffect 함수 실행

2. 마운트될 때만 실행

마운트가 될 때만 이라는 것은, 가장 처음 화면이 렌더링 될 때 실행한다는 것이다. 여기서 해볼 것은 업데이트될(렌더링될때) 때는 실행되지 않게 하려는 것이다.

바로 useEffect 함수의 두번째 파라미터로 빈 배열을 넣어주는 것이다.

useEffect(()=>{
    console.log('마운트 되었어요.')
},[])

두번째 인자로 빈 배열[]이 들어간 것을 볼 수 있다.

• 가장 처음 화면을 나타낼 때만 실행되고 렌더 될 때는 실행되지 않는다.

3. 특정 값 업데이트 될 때만 실행

예를들어, name값이 바뀔 때만 실행하고 싶을 때, useEffect의 두번째 파라미터의 배열에 검사하고 싶은 값을 넣어주면 된다.

useEffect(()=>{
    console.log('name바뀔때마다 실행되요')
},[name])

name 값이 바뀔 때만 console.log가 실행 될 것이다.

4. 뒷정리하기(cleanup) ?

useEffect 는 렌더링 된 직후 마다 실행된다. 렌더링되고 직전에, 어떠한 작업을 하고 싶을 때는 useEffect에서 cleanup함수를 반환해야 한다.

이해가 쉽지 않다.. 아래 정리를 보고 천천히 이해해보자

useEffect 함수를 통해 마운트 될 때, 처리를 해줄 수 있다.

state 값이 바뀌어, 다시 렌더가 되어 useEffect가 실행된다.

여기서 중요한것은 useEffect 함수 내부에 return 으로 함수를 입력해준다.

1   useEffect(()=>{
2       console.log("렌더링될 값,", state) // 1
3       return ()=>{
4           console.log("렌더링 되기 전의 값", state) // 0
5            }
6       })

• line3 ~ line5 까지의 return 내부에 render 되기 직전에 해야할 일을 적어 놓을 수 있다.

여기까지 useEffect를 통해 마운트 될때, 렌더 될때 처리할 수 있는 방법에 대해 알아 봤다.

훅스의 자세한 사용법은 아직 시작도 안했지만, 기본적인 것만 알아도 함수형에서 state와 componentdidmount 를 사용할 수 있는 상황을 알아보았습니다.

그럼 이제부터는 JS 의 기본적인 것을 더 공부해보겠습니다.