리액트(React) useEffect란?

안녕하세요~  이번에는 리액트 훅 종류중 useEffect에 대해 알아보겠습니다. 

📑목차
1. useEffect
1-1. useEffect란?
1-2. useEffect 사용 방식
1-3. useEffect 의존성 배열
1-4. useEffect 사용 코드 

서론

먼저 useEffect 훅을 사용하기전 생명주기에 대한 이해가 있으셔야 합니다. 왜냐하면 useEffect는 생명주기를 대체하기 때문입니다. 이전에 클래스형 컴포넌트에서 생명주기 함수를 보시면  componentDidMount( ), componentDidUpdate( ), componentWillUnmount( )  이 함수들을 사용하셨을 겁니다. 생성, 업데이트, 소멸 이런 순서로 말이죠, 함수형에서 생명주기는  useEffect로 처리할 수 있기 때문에 사용됩니다. 그럼 본문으로 가시죠~

본론

1. useEffect

 

1-1. useEffect( ) 란?

리액트 함수형 컴포넌트에서 특정 작업(side effect)를 수행할 수 있도록 해주는 훅 

여기서 특정 작업(side effect)란?

컴포넌트 렌더링 외에 모든 작업 (서버에서 API 호출, 콘솔 로그 출력)등 부가 작업을 말합니다.

 

1-2. useEffect( ) 사용 방식

 

기본적으로 useEffect( )는 인자로 콜백함수를 받습니다.

 

 기본적인 useEffect 문법입니다. 

useEffect(() => {
  console.log('컴포넌트가 렌더링될 때마다 실행됩니다.'); // side effect 작업
});

 이 코드는 컴포넌트가 매번 렌더링 될때마다 실행됩니다. 

1-3. useEffect( ) 의존성 배열

 

🔑 참고
의존성 배열이란? 

useEffect가 언제 실행될지를 결정하는 배열

 

의존성 배열이 빈 배열일 때

useEffect(() => {
  console.log('컴포넌트가 마운트될 때만 실행됩니다.');
}, []);

이 코드에서는 컴포넌트가  최초에 렌더링 될때 한번만 실행됩니다.

특정 의존성 배열 일때

useEffect(() => {
  console.log('의존성이 변경될 때마다 실행됩니다.');
}, [dependency]);

이 코드는 특정 의존성 배열에 있는 값이 변경될 때마다 useEffect가 다시 실행됩니다. 즉, 의존성 배열에 값이 변경될때마다 리액트는 상태변화를 감지하여 리렌더링 작업을 한다고 보시면됩니다. 

 

 

1-4. useEffect 사용 코드

 

Game.js (부모 컴포넌트)

import React, { useEffect, useState } from "react";
import { scissorsImg, rockImg, paperImg } from "../images";
import Player from "../components/Player";

const Game = () => {
    // 플레이어의 선택의 값을 담을 매개변수
    const [playerSelect, setPlayerSelect] = useState(null); // 플레이어가 선택할 변수
    const [comSelect, setComSelect] = useState(null); // 컴퓨터가 선택할 변수
    const [result, setResult] = useState("대기중"); // 결과를 담을 변수

    // 게임 컴포넌트
    const select = {
        scissors : {
            name : "가위",
            img : scissorsImg
        },
        rock : {
            name : "바위",
            img : rockImg
        },
        paper : {
            name : "보",
            img : paperImg
        }
    }
    // 선택을 보여주는 컴포넌트
    const playerSelectHandler = (_select) => {
        setPlayerSelect(select[_select])

        // 컴퓨터 선택
        const selectKey = Object.keys(select) // keys 객체 안에 있는 키를 반환, 배열 타입으로
        // ["scissors", "rock", "paper"]
        const randomIndex = Math.floor(Math.random() * 3);
        const selectContent = selectKey[randomIndex]; // "scissors" or "rock" or "paper"
        setComSelect(select[selectContent]);
    }

    // 결과 출력
    const resultHandler = () => {
        // 무승부 부터 거르자
        if(playerSelect.name === comSelect.name) {
            setResult("무승부");
        } else if(playerSelect.name === "가위") {
            const result = comSelect.name === "보" ? "승리" : "패배"
            setResult(result)
        } else if(playerSelect.name === "바위") {
            const result = comSelect.name === "가위" ? "승리" : "패배"
            setResult(result)
        } else if(playerSelect.name === "보") {
            const result = comSelect.name === "바위" ? "승리" : "패배"
            setResult(result)
        } 
    }

    useEffect(() => {
        if(playerSelect === null) return
        resultHandler();
    }, [playerSelect])

    return (
            <>
                <div className="plyer-wrap">
                    <Player name={"플레이어"} selectImg={playerSelect} resultText={result}/>
                    <Player name={"컴퓨터"} selectImg={comSelect} resultText={result} />
                </div>

                <div>
                    <button onClick={() => playerSelectHandler("scissors")}>가위</button>
                    <button onClick={() => playerSelectHandler("rock")}>바위</button>
                    <button onClick={() => playerSelectHandler("paper")}>보</button>       
                </div>
            </>
    )
}
export default Game

Player.js (자식 컴포넌트)

import React, { useEffect } from 'react'

// 부모에서 props를 전달받는다
// props -> 객체
const Player = ({name, selectImg, resultText}) => {
    useEffect(() => {
        console.log(name);
    })
  
  let tempResult = resultText;
  if(name === "컴퓨터") {
    tempResult = resultText === "무승부" ? "무승부" : resultText === "이겼어!" ? "졌어" : "이겼어!"
  }

  return (
    <div className='player'>
        <div>{name}</div>
        <img src={selectImg?.img} />
        <div className='result-text'>{tempResult}</div>
    </div>
  )
}

export default Player

 

useEffect(() => {
    if (playerSelect === null) return;
    resultHandler();
}, [playerSelect]);

여기서 useEffect 훅을 사용한 이유는 플레이어가 선택한 값의 따라 게임의 결과를 계산하고 업데이트 하기 위해서 사용되었습니다. 의존성 배열에는 특정 의존성에 대한 값을 삽입하였습니다. 플레이어가 선택을 할 때마다, playerSelect 의 값이 업데이트되고, 그에 따라 useEffect가 실행되어 게임의 결과를 계산하는 resultHandler() 함수가 호출되는 과정입니다.

 

 

결론

useEffect는 컴포넌트가 렌더링된 후 특정 작업을 실행할 때 사용하는 훅입니다.
의존성 배열을 통해 언제 실행할지를 제어할 수 있어, 상태 변화에 따른 작업을 효율적으로 처리할 수 있습니다.
렌더링 직후 실행되는 부수 효과(데이터 요청, 결과 계산 등)를 처리할 때 필수적으로 사용됩니다.