React 사이드이펙트

1. Side-Effect
    - 함수 내 특정 동작이 함수 외부에 영향을 끼쳐, 프로그램 동작을 이해하기 어렵게 만드는 행위
    - settimeout, setinterval
        - 예측하기 어려운 함수, 종료 후 시점에서 어떤 작업을 하고 싶을 때
    - 서버 통신(fetch) 로 통신을 할 때
        - 사용자가 요청했을 때 이후 또는 직전에 어떤 작업을 하고 싶을 경우

2. useEffect
    - Side-Effect를 따로 관리하여 컴포넌트가 최대한 순수 함수를 유지할 수 있도록 도와주는 함수
    - useEffect()는 랜더링이 모두 끝난 다음에 실행된다.

    가용 범위는?

    - 랜더링 될 때 마다 실행
    > useEffect(()=>{})

    - 최초 랜더링(마운트)될 때 실행
    > useEffect(()=>{}, [])

    - 특정 컴포넌트가 변경될 때 실행
    > useEffect(()=>{}, [state])

 

 

☆ Code

 

★ SideEffect.jsx

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

const SideEffect = () => {

    const [color, setColor] = useState("black")
    const [name, setName] = useState("");

    const onClickToChangeColor = () => {
        setColor("red")
    }

    const onClickToChangeName = () => {
        setName("홍길동")
    }

    useEffect(()=> {
        console.log("색상이 변경 됐을 때 실행하는 콘솔😁")
    }, [color])
    
    return (
        <div>
            <h1 style={{color}}>안녕하세요! {name}님</h1>
            <button onClick={onClickToChangeColor}>색상 변경</button>
            <button onClick={onClickToChangeName}>이름 변경</button>
        </div>
    );
};

export default SideEffect;

 

★ SideEffectMount

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

const SideEffectMount = () => {

    console.log("최초 마운트")

    const [users, setUsers] = useState([])

    useEffect(()=>{
        const getDates = async () => {
            const response = await fetch('https://jsonplaceholder.typicode.com/users')
            const datas = await response.json();
            console.log('리랜더링')
            return datas
        }
        getDates().then(setUsers)
    }, [])

    return (
        <div>
            {users.map((user, i) => <p key={i}>{user.name}</p>)}
        </div>
    );
};

export default SideEffectMount;