[React] State

[React] StateFront-end/React2024. 1. 8. 15:34@설빈

Table of Contents

📚 State란 무엇인가요?

리액트에서 state는 컴포넌트의 상태를 나타내는 데이터예요. 이는 사용자의 상호작용이나 시간의 경과에 따라 변경될 수 있는 정보를 말해요. state의 변화는 리액트가 컴포넌트를 다시 렌더링 하게 만들어, 사용자 인터페이스가 최신 상태를 반영하도록 해요.

식당에서 주문서는 손님이 현재 주문한 음식을 나타내죠. 손님이 주문을 변경하면, 주문서의 내용도 그에 맞게 바뀌어요. 주문서가 변경되면, 주방은 변경된 주문에 맞춰 새로운 음식을 준비하고 손님에게 제공해요.

리액트의 state도 이와 비슷해요. state는 컴포넌트의 현재 상태(예: 사용자가 입력한 텍스트, 선택한 옵션 등)를 나타내요. 사용자가 상호작용(예: 버튼 클릭, 폼 입력)을 통해 state를 변경하면, 리액트는 변경된 state에 맞게 컴포넌트를 새롭게 렌더링 해요. 이 과정을 통해 사용자에게 새로운 화면이나 데이터가 보여요.

즉, state는 사용자의 상호작용에 따라 변화하는 컴포넌트의 '주문서'와 같으며, 이 변경에 따라 화면이 업데이트돼요.

🖥️ state의 사용 방법

리액트에서 state를 사용하는 방법은 간단하면서도 강력해요.

1. state 초기화하기

컴포넌트 내에서 useState 훅을 사용하여 state를 초기화해요. useState는 state 변수와 그 값을 설정하는 함수를 반환해요.

import React, { useState } from 'react';

function MyComponent() {
    // State 초기화
    const [count, setCount] = useState(0);
}

2. state 사용하기

초기화된 state는 컴포넌트 내에서 자유롭게 사용할 수 있어요. 이를 통해 UI를 동적으로 렌더링 하거나, 사용자 상호작용을 처리할 수 있어요.

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

    return (
        <div>
            <p>Count: {count}</p>
        </div>
    );
}

3. state 업데이트하기

state를 업데이트할 때는 setState 함수를 사용해요. 이 함수는 새로운 state 값을 인자로 받아, 컴포넌트를 다시 렌더링 해요.

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

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increase</button>
        </div>
    );
}

state는 직접 수정하면 안 돼요! 대신, setState 함수를 사용해야 해요.

🤔 state vs JavaScript

리액트의 state를 사용하는 것이 순수 자바스크립트로 동일한 기능을 구현하는 것보다 얼마나 간편한지 확인해 볼게요.

1. state를 사용하여 구현한 카운터

import React, { useState } from 'react';

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

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increase</button>
        </div>
    );
}

이 코드에서 count는 카운터의 현재 값을 나타내며, setCount 함수는 클릭 이벤트에 반응하여 count 값을 업데이트합니다. 리액트는 state의 변경을 감지하고 자동으로 UI를 업데이트합니다.

2. JavaScript로 구현한 카운터

<!DOCTYPE html>
<html>
<body>
    <p id="counter">Count: 0</p>
    <button id="increaseButton">Increase</button>

    <script>
        let count = 0;

        document.getElementById('increaseButton').addEventListener('click', function() {
            count++;
            document.getElementById('counter').innerText = 'Count: ' + count;
        });
    </script>
</body>
</html>
}

이 예시에서는 count 변수를 직접 관리하고, 버튼 클릭 이벤트를 수동으로 처리합니다. 또한, 카운터 값을 업데이트하기 위해 DOM 요소를 매번 찾아야 합니다.

3. 비교

리액트: 상태 관리가 간단하고 직관적이에요. 상태가 변경되면 리액트가 자동으로 UI를 업데이트해요.
자바스크립트: 상태 관리와 UI 업데이트를 모두 수동으로 처리해야 해요. 이는 코드가 더 복잡하고 오류가 발생하기 쉬워져요.

🚨 주의할 점

직접 수정하지 않기: 리액트의 state는 직접 수정해서는 안 돼요. 상태를 변경하려면 항상 setState 함수나 useState 훅의 업데이트 함수를 사용해야 해요. 직접 수정하면 리액트가 상태 변경을 감지하지 못해 UI가 업데이트되지 않아요.
비동기적 업데이트: state의 업데이트는 비동기적으로 일어나요. 따라서 setState를 호출한 직후에 state가 바로 업데이트되지 않을 수 있어요. 이를 고려하여 로직을 작성해야 해요.
초기 상태의 중요성: useState를 사용할 때 초기 상태를 제공하는 것이 중요해요. 이는 컴포넌트의 초기 렌더링 시 state의 값을 결정해요.
상태 의존성 주의: state를 업데이트하는 함수 내에서 현재 state에 의존하는 경우, state의 최신 값을 사용하는 것이 중요해요. 이를 위해 함수형 업데이트를 사용할 수 있어요.
불필요한 렌더링 방지: state가 변경될 때마다 컴포넌트가 재렌더링돼요. 따라서 불필요한 렌더링을 방지하기 위해 상태 업데이트를 신중하게 관리해야 해요.
복잡한 상태 관리: 복잡한 상태 로직은 useReducer 훅이나 상태 관리 라이브러리를 사용하여 관리하는 것이 좋을 수 있어요.

📖 결론

state는 리액트에서 컴포넌트의 동적인 데이터를 관리하는 핵심적인 방법이에요. state를 통해 사용자 인터페이스의 상호작용과 데이터 변화를 효과적으로 다룰 수 있으며, 이는 리액트 애플리케이션의 반응성과 유동성을 보장해요.

state의 올바른 사용은 리액트 개발의 중요한 부분이며, 이를 통해 더욱 풍부하고 상호작용이 풍부한 웹 애플리케이션을 구축할 수 있어요.

🔗 추가 정보

리액트의 state에 대한 더 깊은 이해를 원하신다면, 리액트 공식 문서에서 자세한 정보를 찾아볼 수 있어요.

'Front-end > React' 카테고리의 다른 글

[React] 생명 주기 (0)	2024.10.20
[React] JSX (0)	2024.10.19
[React] useEffect (0)	2024.04.04
[React] useRef (0)	2024.01.31

@설빈 :: console.log("Hello, World!");

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!