[react] React Hooks 1 (useState, useEffect)

📍 React Hook ??

• 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 기능.

 

 

📍 useState

• 컴포넌트 내부에서 상태(state)를 관리할 때 사용.
• 초기화
  • const [name, setName] = useState("홍길동");
  • const [ 스테이트 변수, 이 스테이트 변수를 update 를 할 수 있는 함수 ] = useState("초기값 넣기");
  • --> name = "홍길동" 으로 초기값이 넣어진 상태로 시작함.
• 단일 문자, 단일 숫자, 배열, 객체 모두 상태값 관리 가능.
• setCar(previousState => {
                  return { ...previousState, color:"white" };
              }
          );
  • ** previousState ** 이 부분 중요!! 
    • 이전 상태를 기반으로 변경 할 때 --> 꼭 써야함!!
    • 객체 / 배열 state는 기본적으로 prev => 쓴다고 생각하면 안전하다.!

import { createRoot } from 'react-dom/client';
import { useState } from 'react';


function App() {
    const [car, setCar] = useState({
        brand : "현대",
        model : "제네시스",
        color : "black"
    });

    const updateCarInfo = () => {
        setCar(previousState => {
                return { ...previousState, color:"white" };
            }
        );
    };

    return (
        <>
            <p>{car.brand} {car.model} {car.color}</p>
            <button onClick={updateCarInfo}>클릭</button>
        </>
    );
}

createRoot(document.getElementById('react4')).render( <App /> );

 

 

---

 

📍 uesEffect ?

• 리액트 함수형 컴포넌트에서 side effects 를 수행하기 위한 훅.
• 랜더링은 되나, 실제 DOM 업데이트는 생략함.
• state 의 값의 변화를 감지해서 작동함.
• useEffect( () => {
      console.log(`${count} useEffect 실행됨`);
  }, [ ] );
  • 맨 처음에 로드(마운트) 될 때는 당연히 실행되고.
    state 값이 변화하면 작동함. 
  • 뒤에 있는 [] 에는 변화를 감지할 변수에 대해서 적음. 
    • 이 배열의 이름?? --> 의존성 배열
    • ex) useEffect( () => {console.log(`${count} useEffect 실행됨`);}, [ count ] );
    • 라면 --> count 변수값의 변화만 감지함.
  • 전부 다 감지하면 [] 를 생략! 
• 토글 사용하는 공식 !! 
  • setState(prev => !prev);
• useEffect의 return은 “정리(cleanup) 함수”를 등록하는 것이다.
  • “이 effect가 끝나거나, 다시 실행되기 직전에, 또는 컴포넌트가 사라질 때 이 함수를 실행해라.”
• 의존성 배열이 하는 일??
  • 의존성 배열 = "알람 조건"

    • 비유로 이해해보기

      

  •  리액트는 매 렌더링 마다 의존성 배열 안의 값이 바꼈는 지 확인함.
    • 바꼈으면 --> cleanup --> effect 재실행.
    • 안 바꼈으면 --> 아무것도 안함.
  • 3가지 경우가 발생함.
    1. [] 빈 배열
       • 딱 한 번만 실행되는 effect
       • 이벤트 등록, 타이머 시작, 초기 데이터 요청 등등 --> 초기 1회 작업에 쓰임.
       • “이 effect는 어떤 state / props 변화에도 의존하지 않는다”
       • 실행 타이밍
         • 처음 화면 등장 (mount)
           → effect 실행
           
           화면에서 사라질 때 (unmount)
           → cleanup 실행
    2. [value] (의존성 있음.)
       • 렌더링 발생. --> 이전 value 와 비교해서 --> 값이 다르면 effect 실행.
       • 실행 흐름 
         • 초기 렌더 → effect
           value 변경
           → cleanup
           → effect 재실행
    3. 의존성 배열 생략.
       • 조건이 없으면?? --> 매 렌더링마다 실행함.
       • 결과
         • 렌더링마다 effect 실행
           렌더링마다 cleanup 실행
         • --> 내 코드에서는 시작하자마자 꺼질 꺼임.

import {createRoot} from 'react-dom/client';
import { useState, useEffect } from 'react';
import Counter from './Counter';

function App() {

    const [count, setCount] = useState(0);
    const [name, setName] = useState("");

    const updateCounter = () => {
        setCount(count + 1);
        console.log("usestate 실행")
    };

    const handleNameChange = (e) => {
        setName(e.target.value);
    }

    useEffect( () => {
        console.log(`${count} count - useEffect 실행됨`);
    }, [count]);

    useEffect( () => {
        console.log(`${name}  name - useEffect 실행됨`);
    }, [name]);

    return (
        <div>
            <p>{count}</p>
            <button onClick={updateCounter}>카운트 증가</button>
            <input type="text" onChange={handleNameChange} />
            <p>{name}</p>
        </div>
    );
}

function App2() {
    const [showCounter, setShowCounter] = useState(false);

    return(
        <>
            { showCounter && <Counter /> }
            <button onClick={ () => {setShowCounter(prev => !prev)} }>클릭</button>
        </>
    );
}

createRoot(document.getElementById('react4')).render( <App2 /> );

 

## Counter.jsx

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

const Counter = (props) => {
    const [cnt, setCnt] = useState(0);

    useEffect(() => {
        const counter = setInterval( () => {
            console.log(`${cnt} --- counter works`);
            setCnt( cnt + 1 );
            
            /* 정석은 이거! 
            effect 도 한번만 호출하고, cnt 는 증가하게 됨.
            setCnt(prev => {
                console.log(`${cnt} --- counter works -- ${prev} `);
                return prev + 1;
            });
            */
        }, 1000);
		
        
        
        
        return () => {
            clearInterval(counter);
            console.log("stop!12313!");
        };
    }, []);
   
    

    return (
        <div>
            <p>counter is working!!</p>
        </div>
    )
}

export default Counter;

 

 

 

📍 내 코드에서 의존성 배열이 있고 없고의 차이?

• [] 빈 배열인 경우
  • [Log] 0 --- counter works (Counter.jsx, line 9, x3)
    [Log] stop!12313! (Counter.jsx, line 14)
  • count 가 0만 나옴.
  • 빈 배열 []이면
    useEffect는 처음 한 번만 실행되고,
    interval은 처음의 cnt = 0만 기억한 채 계속 돈다.
  • JS 함수는 “만들어진 순간의 변수 값을 기억”한다. --> 이 effect가 실행될 당시의 cnt를 기억해.
  • 
  • 클로저가 처음 값을 붙잡고 있기 때문.
  • start / stop 을 반복해도 계속해서 cnt = 0 인데...
    • 이건 cnt가 1부터 시작하지 않는 이유는
      cleanup 후에 “이전 interval이 재개되는 게 아니라”,
      “컴포넌트가 새로 만들어지면서 state와 effect가 다시 초기화되기 때문”이야.
    • 같은 컴포넌트의 재시작 아님 !!!! ❌ ❌
    • ⭐️⭐️ 완전히 새 인스턴스 생성. ⭕️ ⭕️
    •      컴포넌트가 언마운트될 때 일어나는 일.    
      • Counter 언마운트
        ↓
        cleanup 실행
        ↓
        interval 제거
        ↓
        컴포넌트 메모리에서 제거
        ↓
        state(cnt)도 함께 사라짐
      • ❗ 이 시점에 cnt = 1 이었다고 해도
        👉 그 값은 폐기됨
    • 왜 "이전 cnt=1" 이 이어지지 않는가???
      • 컴포넌트가 사라지면 → state도 사라짐
      • 다시 생기면 → 처음부터 다시 생성 (--> cnt = 0)
    • cleanup 이후에 다시 시작되는 건 “이전 effect의 재개”가 아니라 “새 컴포넌트의 첫 실행”이다.
    • 이전 state 유지하고 싶으면 → 부모로 끌어올려야 함

      • function App() {
          const [cnt, setCnt] = useState(0);
          const [show, setShow] = useState(false);
        
          return (
            <>
              <button onClick={() => setShow(p => !p)}>toggle</button>
              {show && <Counter cnt={cnt} setCnt={setCnt} />}
            </>
          );
        }

         

        Counter 가 사라져도 

        cnt 는 App 에 남아 있음.

        "새 컴포넌트의 첫 실행" 을 할 때? 

        props 를 가지고 새로 Counter 컴포넌트를 시작하게 됨.

        이 Counter 컴포넌트 안에 useEffect 가 들어있고!

• 생략한 경우
  • [Log] 8 --- counter works (Counter.jsx, line 9)
    [Log] stop!12313! (Counter.jsx, line 14)
  • count 가 늘어남.
  • 의존성 배열을 생략하면
    useEffect가 매 렌더링마다 다시 실행되고,
    그때마다 최신 cnt를 캡처한 새로운 interval이 만들어진다.
  • 렌더링마다 effect 를 다시 실행함.
    • cnt 는 useEffect 밖에 있으니까, useState로 변화값을 볼 수 있었음.
  • 
  • start / stop 을 여러번 눌러서 보면, Interval 을 할 때는 cnt 값이 증가함. 
  • 근데, stop 후에 다시 start 해보면, 완전히 초기로 돌아감 --> cnt = 0 으로 새로 시작함.

 

📍 ?

• ㅇㅇ 

 

 

 

 

📍 ?

• ㅇㅇ 

 

 

---

출처 : 

 

 

 

---

개발 공부를 위한 블로그 입니다. 

오류가 있다면 댓글로 알려주세요! 

감사합니다.