Chapter03. 리엑트 훅 / useEffect 훅

<< 학습 목표 >>

1. useEffect 훅을 사용할 수 있다.

2. useeffect 훅의 세 가지 상황을 설명할 수 있다.

---

useEffect 훅을 배우기 전에 잠깐 우리가 알고 있는 컴포넌트에 대해서 살짝 더 안으로 들어갔다 오자

지금까지 우리는 컴포넌트를 함수 형태로 선언했음

리엑트에 처음부터 함수 형태의 컴포넌트가 있었던건 아님

리엑트에서 처음에 컴포넌트를 선언할 때는 클래스 형태로 선언해야했음

그러나 클래스 형태의 컴포넌트 선언이 불편하다는 의견이 생기면서 좀 더 간단한 방법인 함수 형태로 컴포넌트를 선언할 수 있는 방법이 생긴 것

 

우리가 훅을 배우다 갑자기 컴포넌트의 형태에 대해서 얘기하는 이유는 우리가 지금 배우고 있는 훅은 함수 형태 컴포넌트를 위해 나온 것임

따라서 훅은 리엑트에 처음부터 있었던게 아님

리엑트에 클래스 형태 컴포넌트만 있었을 때 클래스 형태 컴포넌트가 사용하던 훅이 있음

<< 클래스 형태 컴포넌트가 사용하는 훅 >>

- componentDidMount() : 컴포넌트가 화면에 출력된 이후 호출되는 메서드

- componentDidUpdate() : 컴포넌트에 어떤 변화가 생길 때마다 변화가 생긴 이후에 호츨되는 메서드

- componentWillUInmount() : 컴포넌트가 화면에서 사라질 때 사라지기 직전에 호출되는 메서드

 

전 글에서 배운 useState 훅은 componentDidUpdate() 메서드와 같은 역할을 하는 훅임

이번에 배울 useEffect 훅은 componentDidMount() 메서드와 같은 역할을 할 수 있고 componentDidUpdate() 메서드와 같은 역할을 할 수 있고 또 componentWillUInmount() 와 같은 역할을 할 수 있는 훅임

 

즉, 이번에 배울 useEffect 훅은 컴포넌트의 다양한 상태에 반응하는 훅임

---

useEffect 훅의 형식은 다음과 같음

useEffect(함수, 배열);

 

useEffect는 배열 자리에 변수들을 갖고 있는 배열을 넣음

그리고 배열 안에 들어있는 변수들 중 어느 하나라도 값이 변하면 함수를 호출함

 

배열 자리에 변수들을 갖고 있는 배열을 반드시 넣어야하는건 아님

1. 배열 자리에 변수들을 갖고 있는 배열을 넣지 않을 수도 있고 

2. 배열 자리에 변수들을 갖고 있는 배열을 넣을 수도 있고

3. 배열 자리에 빈 배열을 넣을 수도 있음

---

<< 1. 배열 자리에 변수들을 갖고 있는 배열을 넣지 않기 >>

배열 자리에 변수들을 갖고 있는 배열을 넣지 않기

즉, 두 번째 인자를 아예 넣지 말자 

두 번째 인자를 아예 넣지 않으면 componentDidMount(), componentDidUpdate() 와 같은 동작을 하는 훅이 됨

 

프로젝트 -> src -> chapter03 -> Component13.jsx 를 추가하고 아래 코드를 추가하자

import React, { useState, useEffect } from 'react';

function Component13() {
    const [count, setCount] = useState(0);

    let clickBtn = () => {
        setCount(count+1);
    }

    let updatedPage = () => {
        console.log("페이지에 변화가 생겼습니다.");
    }

    useEffect(updatedPage);

    return(
        <div>
            <p>총 {count}번 클릭했습니다</p>
            <button onClick={clickBtn}>클릭~!</button>
        </div>
    );
}

export default Component13;

 

버튼을 클릭하면 useState 훅이 동작해 count 변수의 값을 증가(1)시키고 증가된 값을 출력함(2)

useEffect 훅을 사용해서 페이지에 어떤 변화가 생길 때 마다 이를 감지하기 위해 두 번째 인자는 비워뒀음(3)

페이지에 어떤 변화가 생길 때 마다 updatePage 메서드가 호출됨(4)

여기서 어떤 변화란 페이지 내 모든, 말 그대로 어떤것이든 변화를 뜻함

이 페이지에는 count 변수의 값을 증가시키고 count 변수의 값을 출력하는 변화가 발생함

 

이 컴포넌트를 웹 페이지에 출력하고 웹 페이지에서 개발자 도구를 열어 [ console 패널 ] (1) 을 확인해보자

코드 설명대로 결과를 보기 전에~!

 

나는 페이지에 막 들어오기만 했지 아무것도 누르지 않았음

그런데 개발자 도구를 보면 "페이지에 변화가 생겼습니다." 가 두 번 출력됬음

 

버튼을 클릭하지도 않았는데 왜 이렇게 출력된걸까?

리엑트가 컴포넌트를 화면에 출력하는 구조를 생각해보면 맨 처음에는 아이디가 root인 div 태그가 있었고 그 태그에 컴포넌트를 출력하는 것이었음

아이디가 root인 div 태그에 컴포넌트가 출력되는 변화가 생겼으므로 아무것도 클릭하지 않아도 "페이지에 변화가 생겼습니다." 가 출력됨

 

두 번 출력되는 이유는 뭘까??

두 번 출력된 이유는 리엑트가 자체적으로 테스트를 하기 때문임

개발자의 실수로 컴포넌트 내 코드에 어떤 문제가 생겼을 수 있으므로 사용자에게 화면을 보여주기 전 리엑트 자체적으로 컴포넌트를 화면에 출력해봄

개발자의 실수로 컴포넌트 내 코드에 문제가 생겼다면 컴포넌트가 보이지 않고 오류 페이지가 보임

개발자가 실수 하지 않아 컴포넌트 내 코드에 문제가 없다면 사용자에게 컴포넌트를 보여주기 위해 컴포넌트를 출력함

 

그래서 "리엑트가 컴포넌트를 테스트 하기 위해 컴포넌트를 출력한다" 라는 변화가 생겼으므로 첫 번째로 "페이지에 변화가 생겼습니다." 가 출력되고 컴포넌트가 테스트에 통과해 컴포넌트를 출력하므로 두 번째 "페이지에 변화가 생겼습니다." 가 출력되는 것

 

이제 버튼을 클릭해보면 [ console 패널 ] 에 "페이지에 변화가 생겼습니다." 가 출력될 것

 

아래와 같이 페이지에 변화를 주는 요소가 늘어나면 변화 마다 useEffect로 지정한 함수가 호출되므로 useEffect로 지정한 함수가 더 많이 호출될 것

---

<< 2. 배열 자리에 변수들을 갖고 있는 배열을 넣기 >>

useEffect 훅의 두 번째 인자(배열 자리)에 변수들을 갖고 있는 배열을 넣으면 배열 내 변수 중 어느 하나라도 변수의 값이 변하면 useEffect 로 지정한 함수가 호출됨

 

프로젝트 -> src -> chapter03 -> Component14.jsx 파일을 추가하고 아래 코드를 추가하자

import React, { useState, useEffect } from 'react';

function Component14() {
    const [count1, setCount1] = useState(0);
    const [count2, setCount2] = useState(0);

    let clickBtn1 = () => {
        setCount1(count1+1);
    }

    let clickBtn2 = () => {
        setCount2(count2+1);
    }

    let updatedPage = () => {
        console.log("count1변수에 변화가 생겼습니다.");
    }

    useEffect(updatedPage, [count1]);

    return(
        <div>
            <h1>count1</h1>
            <p>총 {count1}번 클릭했습니다</p>
            <button onClick={clickBtn1}>클릭~!</button>

            <hr />

            <h1>count2</h1>
            <p>총 {count2}번 클릭했습니다</p>
            <button onClick={clickBtn2}>클릭~!</button>
        </div>
    );
}

export default Component14;

 

이번 컴포넌트에는 버튼을 클릭했을 때 변하는 변수가 2개임

useEffect 훅으로 변화를 감지할 변수로 count1 하나만 등록해뒀으므로 첫 번째 버튼을 클릭하면 [ console 패널 ] 에 "count1변수에 변화가 생겼습니다" 가 출력됨

두 번째 버튼을 클릭했을 때는 아무것도 출력되지 않음

 

useEffect 훅이 변화를 감지할 변수를 이와 같이 여러 개로 등록을 해두면 배열 내 변수 중 하나라도 변수의 값이 변했을 때 useEffect 훅으로 지정한 함수가 호출됨

---

<< 3. 배열 자리에 빈 배열을 넣기 >>

useEffect 훅의 두 번째 인자(배열 자리)에 빈 배열을 넣으면 componentDidMount(), componentWillUInmount() 시점에 useEffect 로 지정한 함수가 호출됨

즉, 페이지에 막 들어왔을 때( componentDidMount ), 페이지에서 해당 컴포넌트가 사라질 때 ( componentWillUInmount ) useEffect 로 지정한 함수가 호출됨

 

바로 위에서 만들었던 Component14 컴포넌트를 약간 수정해 빈 배열을 넣어보자

빈 배열이므로 useEffect 훅이 변화를 감지할 변수가 없는 것 그래서 페이지에 막 들어왔을 떄와 페이지에서 해당 컴포넌트가 사라질 때만 useEffect 훅으로 등록한 함수가 호출됨

---

여기까지 useState 훅 다음으로 자주 사용하는 useEffect 훅을 배웠음

useEffect 훅의 두 번째 인자로 뭘 넣느냐에 따라서 useEffect 훅으로 등록한 함수가 호출되는 시점이나 횟수가 매우 상이하니 잘 정리해둬야함