왜 state를 직접 바꾸지 않고 useState를 사용해야 하나?

안녕하세요! 오늘은 React에서 state를 직접 변경하지 않고 useState 훅을 사용하는 이유에 대해 알아보겠습니다. useState 훅은 함수형 컴포넌트에서 상태 관리를 할 수 있게 해주는 중요한 도구입니다. 그 이유를 단계별로 살펴보겠습니다.

왜 state를 직접 바꾸지 않고 useState를 사용해야 하나?

1. 상태 변경 감지

React는 상태가 변경될 때마다 컴포넌트를 다시 렌더링합니다. 하지만 상태를 직접 변경하면 React가 이를 감지하지 못합니다. useState를 사용하면 React가 상태 변경을 감지하고, 필요한 경우 컴포넌트를 다시 렌더링할 수 있습니다.

직접 상태 변경

import React from 'react';

function Counter() {
    let count = 0;

    const increment = () => {
        count += 1;
        console.log(count); // 상태 변경은 되지만, 렌더링이 되지 않음
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
}

위 예제에서 count를 직접 변경하지만, 상태 변경을 React가 감지하지 못하므로 컴포넌트는 다시 렌더링되지 않습니다.

useState 사용

import React, { useState } from 'react';

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

    const increment = () => {
        setCount(count + 1); // 상태 변경이 React에 의해 감지되고, 컴포넌트가 다시 렌더링됨
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
}

이 예제에서 useState 훅을 사용하면 상태 변경이 감지되고, 컴포넌트가 다시 렌더링됩니다.

2. 불변성 유지

React의 상태 관리에서 불변성을 유지하는 것은 매우 중요합니다. 상태를 직접 변경하면 불변성이 깨지고, 이는 예기치 않은 버그를 일으킬 수 있습니다. useState를 사용하면 상태가 변경될 때마다 새로운 상태 객체가 생성되어 불변성이 유지됩니다.

직접 상태 변경의 문제

import React from 'react';

function App() {
    const user = { name: 'Alice', age: 25 };

    const updateAge = () => {
        user.age = 26; // 직접 상태 변경
        console.log(user); // 상태 변경은 되지만, 불변성이 깨짐
    };

    return (
        <div>
            <p>Name: {user.name}</p>
            <p>Age: {user.age}</p>
            <button onClick={updateAge}>Update Age</button>
        </div>
    );
}

useState를 사용한 상태 변경

import React, { useState } from 'react';

function App() {
    const [user, setUser] = useState({ name: 'Alice', age: 25 });

    const updateAge = () => {
        setUser({ ...user, age: 26 }); // 불변성을 유지하면서 상태 변경
    };

    return (
        <div>
            <p>Name: {user.name}</p>
            <p>Age: {user.age}</p>
            <button onClick={updateAge}>Update Age</button>
        </div>
    );
}

이 예제에서 useState를 사용하여 상태를 변경하면 불변성이 유지됩니다.

3. 상태 초기화

useState는 상태 초기값을 설정할 수 있습니다. 이는 컴포넌트가 처음 렌더링될 때 상태를 초기화하는 데 유용합니다.

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0); // 초기 상태값을 0으로 설정

    const increment = () => {
        setCount(count + 1);
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
}

4. React의 렌더링 사이클과의 통합

useState는 React의 렌더링 사이클과 밀접하게 통합되어 있습니다. 상태가 변경되면 React는 자동으로 컴포넌트를 다시 렌더링하고, 최신 상태를 사용하여 UI를 업데이트합니다. 이는 상태 관리를 더욱 간편하고 직관적으로 만들어줍니다.

결론

React에서 상태를 직접 변경하지 않고 useState를 사용해야 하는 이유는 상태 변경을 감지하고, 불변성을 유지하며, 상태 초기화를 간편하게 하고, React의 렌더링 사이클과 통합할 수 있기 때문입니다. 이러한 이유들로 인해 useState를 사용하여 상태를 관리하는 것이 권장됩니다.

오늘도 제 글을 읽어주셔서 감사합니다. 다음 시간에 더 유익한 주제로 찾아뵙겠습니다.