ch02.useEffect

• 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hooks이다.
• 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 된다.
• 예제

  • import React, { useEffect, useState } from "react";
    const Info = () => {
      
      const [name, setName] = useState("");
      const [nickname, setNickname] = useState("");
      useEffect(() => {
        console.log("렌더링이 완료되었습니다.!");
        console.log({
          name,
          nickname,
        });
      });
      const onChangeName = (e) => {
        setName(e.target.value);
      };
      const onChangeNickname = (e) => {
        setNickname(e.target.value);
      };
    
      return (
        <div>
          <div>
            <input value={name} onChange={onChangeName} />
            <input value={nickname} onChange={onChangeNickname} />
          </div>
          <div>
            <div>
              <b>이름:</b> {name}
            </div>
            <div>
              <b>닉네임:</b>
              {nickname}
            </div>
          </div>
        </div>
      );
    };
    export default Info;

  • 

    결과

    초기 렌더링, 리 렌더링 될 때마다 함수 실행
• 마운트 될 때만 실행하고 싶을경우
  • 맨 처음 렌더링 될 때만 실행되고, 리 렌더링 될 때는 실행시키지 않으려면 함수의 두 번째 파라미터에 비어있는 배열을 넣어주면 된다.

  •   useEffect(() => {
        console.log("마운트될 때만 실행됩니다.");
      }, []);

• 특정 값이 업데이트될 때만 실행하고 싶을 때
  • 특정 값이 변경될 때만 실행하고 싶은 경우
  • class 형 컴포넌트의 표기

    • componentDidUpdate(prevProps,prevState){
      	if(prevProps.value !== this.props.value){
          	doSomething();
          }
      }

  • useEffect에서는 이러한 작업을 하기 위해서는 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 된다.

    • useEffect(() => {
          console.log(name);
        }, [name]);

• useEffect는 두 번째 파라미터  배열에 무엇을 넣는지에 따라 실행되는 조건이 달라지는데 컴포넌트가 원마운트 되기 전이나, 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리 함수를 반환해 주어야 한다.

  • useEffect(() => {
        console.log('effect');
        console.log(name);
        return () =>{
        	console.log('cleanup');
            console.log(name);
        };
      }, [name]);

  • import React, { useState } from "react";
    import Info from "./Info";
    const App = () => {
      const [visible, setVisible] = useState(false);
      return (
        <div>
          <button
            onClick={() => {
              setVisible(!visible);
            }}
          >
            {visible ? "숨기기" : "보이기"}
          </button>
          <hr />
          {visible && <Info />}
        </div>
      );
    };
    
    export default App;

  • 컴포넌트가 나타날 때 Console에 effect가 나타나고, 사라질 때 cleanup이 나타난다.
  • 렌더링 될 때마다 뒷정리 함수가 계속 나타나고, 뒷정리 함수가 호출될 때는 업데이트되기 적전의 값이다.
  • 언 마운트 될 때에만 뒷정리 함수를 호출하고 싶은 경우라면 useEffect함수의 2번째 파라미터에 비어있는 배열을 넣어주면 된다.

    • useEffect(() => {
          console.log("effect");
          console.log(name);
          return () => {
            console.log("cleanup");
            console.log(name);
          };
        }, []);