WEB/React

React - useState과 useEffect

explorer999 2024. 5. 15. 12:33

useState

  • #state: 컴포넌트가 가질 수 있는 상태값.
  • const[state, setState] = useState(초기값); 이런 식으로 선언한다. state는 컴포넌트가 가지고 있는 현재 상태값이고, setState는 state값을 변경할 때 사용하는 함수이다.
  • setState함수를 사용해서 state를 변경하면, 해당 컴포넌트는 화면에 다시 렌더링 된다. 그래서 state가 변경될 때마다 화면에 바로바로 보이게 하고 싶을 때 useState를 쓰면 된다.
<예제: 클릭할 때마다 화면에서 시간이 1씩 업데이트되게 하는 함수>

import {useState} from 'react';

function App() {
    const [time, setTime] = useState(1);

    const handleClick = () => {
	let newTime;
	if (time >= 12) {
		newTime =1;
	}else {
		newTime = time+1;
	}
	setTime(newTime)k
   };

    return (
        <div>
            <span>현재 시각: {time}시</span>
            <button onClick={handleClick}>Update</button>
        </div>
    );
}

export default App;

 

 

 

 

useEffect

 

  • 리액트에서 어떤 컴포넌트가 Mount, Update, Unmount되었을 때 특정 작업을 처리할 코드를 실행시켜주는 훅이다.

 

# Mount

컴포넌트가 DOM에 삽입되어 화면에 처음 렌더링되는 과정. 마운트 될 때는 초기 상태 설정, 초기 데이터 불러오기, 이벤트 리스너 등록을 할 수 있다. 함수형 컴포넌트에서는 useEffect 훅을 사용하여 마운트 시 실행할 코드를 지정할 수 있다.


# Unmount

컴포넌트가 DOM에서 제거되어 화면에서 사라지는 것. 이벤트 리스너 해제, 타이머 취소, 진행 중인 API 호출 중단, 구독 해제 등의 작업을 useEffect 훅의 clean-up 함수에서 수행할 수 있다.)

 

  • useEffect 훅은 인자로 함수를 받는다. (이 함수는 콜백함수가 된다. 콜백함수란, 다른 함수의 인자로 전달된 함수를 말한다.) 이 콜백함수 내부에 우리가 원하는 작업을 처리하는 코드를 작성하면 된다.
  1. useEffect는 인자로 하나의 콜백함수만 받을 수도 있다. 이렇게 하면 컴포넌트가 렌더링될 때마다 인자로 받은 콜백함수가 실행된다.
  2. 첫 번째 인자로 콜백함수, 두 번째 인자로 배열을 받을 수도 있다. 이때 인자로 받는 배열은 depencdency array라고 한다. 이렇게 하면 컴포넌트가 맨 화면에 처음 렌더링(Mount)될 때 콜백함수가 실행되고, 그 뒤로는 두 번째 인자인 dependency array의 값이 바뀔 때만 콜백함수가 실행된다.
  3. 만약 dependency array가 비었다면 화면에 컴포넌트가 맨 처음 렌더링될 때만 콜백함수가 실행된다.
  • useEffect의 리턴값으로는 clean-up 함수를 받는다. 콜백함수에서 처리한 작업을 정리하는 코드가 이 안에 들어간다.

이벤트리스너를 설정하는 함수를 콜백함수로 받았다면, 클린업 함수 안에는 이벤트리스너를 제거하는 코드가 들어갈 수 있다. 구독 설정하는 게 useEffect의 내용이었다면 구독을 취소하는 코드가 클린업 함수 안에 들어간다.

<예제: 타이머 설정, 타이머 취소하는 useEffect Hook>

import React, {useEffect} from 'react';

const Timer = {props} => {
    useEffect(() => {
        const timer = setInterval(()=> {
            console.log('타이머 돌아가는 중..');
        }, 1000);

        return () => {
            clearInterval(timer);
            console.log('타이머가 종료되었습니다');
    
        };

    }, []);

    return (
        <div>
            <span>타이머를 시작합니다. 콘솔을 보세요!</span>
        </div>
    );
};

export default Timer;

 

 

 

 

내용 출처: React Hooks에 취한다 - useEffect 깔끔하게 마스터하기 | 리액트 훅스 시리즈 (youtube.com)