리액트 Hooks - useState, useEffect

안녕하세요 YB 최정완이에요

많이 쓰이는 useState, useEffect 훅에 대해 같이 알아보아요

 

[들어가기]

React에서 훅(Hook)은 함수형 컴포넌트에서 상태와 라이프스타일 기능을 사용할 수 있도록 해주는 함수에요

라이프스타일 메서드(Lifecycle Methods)는 컴포넌트가 생성되고 업데이트되며 제거되는 과정에서 특정 시점에 호출되는 메서드들을 의미해요. 이 기능은 컴포넌트의 상태를 관리하거나 부수 효과를 처리하는 데 도움을 줘요.

 

1. useState()

useState는 함수형 컴포넌트에서 상태를 관리할 수 있도록 해주는 훅이에요.

useState를 사용하면 상태 변수와 상태를 갱신하는 함수를 생성할 수 있어요.

 

import React, { useState } from 'react';

function ExampleComponent() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
    );
}

 

- 여기서 useState(0)는 초기 상태를 0으로 설정하며, count는 현재 상태 값을, setCount는 상태를 업데이트하는 함수에요.

버튼을 클릭하면 setCount가 호출되어 count 값이 증가해요. count, setCount는 모두 임의로 지정한 이름이에요.

 

2. useEffect()

useEffect는 함수형 컴포넌트에서 부수 효과(side effect)를 관리하기 위한 훅이에요.

예를 들어 데이터 가져오기, 구독 설정, 수동 DOM 조작 등과 같은 작업을 처리할 수 있어요.

 

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

function ExampleComponent() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data));
    }, []);

    return (
        <div>
            {data ? <p>{data}</p> : <p>Loading...</p>}
        </div>
    );
}

 

- 여기에서 useEffect는 컴포넌트가 처음 렌더링될 때 API에서 데이터를 가져오는 작업을 수행해요.

빈 배열 []을 두 번째 인자로 전달함으로써 이 효과는 처음 마운트될 때만 실행되도록 해요.

 

---

두 줄 요약 ! 

• useState: 상태를 추가하고 관리하는 데 사용된다
• useEffect: 부수 효과를 관리하는 데 사용되며, 특정 조건에서 실행된다!