프론트엔드 노트

프론트엔드 개발에서 React는 매우 인기가 있으며, 효율적으로 UI를 구축할 수 있게 도와줍니다. 하지만 React에서 상태 관리는 개발자에게 많은 도전과제를 안겨주기도 합니다. 이 글에서는 React에서 흔히 발생하는 상태 관리 실수와 그 해결책에 대해 살펴보겠습니다.

1. 상태를 직접 수정하는 실수

React의 상태는 불변성을 가져야 하며, 직접 수정하는 것은 피해야 합니다. 상태를 직접 수정하면 React가 상태 변화를 감지하지 못하고, UI가 업데이트되지 않을 수 있습니다.

잘못된 예:

const [state, setState] = useState({ count: 0 });

const increment = () => {
  state.count += 1; // 직접 수정
  setState(state); // 변경된 상태를 설정
};

수정된 예:

const [state, setState] = useState({ count: 0 });

const increment = () => {
  setState(prevState => ({ count: prevState.count + 1 })); // 불변성을 유지
};

2. 상태를 여러 컴포넌트에서 공유할 때 발생하는 문제

여러 컴포넌트에서 동일한 상태를 공유할 때, state를 직접 전달하거나 프로퍼티를 통해 관리하는 것이 어렵고 오류를 유발할 수 있습니다. 이를 해결하기 위해 Context API나 상태 관리 라이브러리(예: Redux)를 사용하는 것이 좋습니다.

Context API 예제:

import React, { createContext, useState, useContext } from 'react';

const CountContext = createContext();

const CountProvider = ({ children }) => {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
};

const IncrementButton = () => {
  const { setCount } = useContext(CountContext);
  return <button onClick={() => setCount(prev => prev + 1)}>Increment</button>;
};

const CountDisplay = () => {
  const { count } = useContext(CountContext);
  return <div>Count: {count}</div>;
};

// App Component
const App = () => (
  <CountProvider>
    <CountDisplay />
    <IncrementButton />
  </CountProvider>
);

3. 비동기 작업 후 상태 업데이트 문제

비동기 작업(예: API 호출) 후 상태를 업데이트할 때, 컴포넌트가 언마운트된 경우 오류가 발생할 수 있습니다. 이를 방지하기 위해 컴포넌트가 언마운트 여부를 확인하고, 이를 처리하는 방법이 필요합니다.

해결 방법 예제:

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

const DataFetcher = () => {
  const [data, setData] = useState(null);
  const [isMounted, setIsMounted] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const json = await response.json();
      
      if (isMounted) {
        setData(json);
      }
    };

    fetchData();

    return () => {
      setIsMounted(false); // 언마운트 시 isMounted를 false로 설정
    };
  }, [isMounted]);

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

4. 상태 업데이트에서의 성능 문제

상태를 업데이트할 때 매번 전체 상태를 새로 설정하면 성능에 영향을 줄 수 있습니다. 특히 큰 상태 객체를 사용하는 경우, 불필요한 리렌더링이 발생할 수 있습니다. 이를 방지하기 위해 필요한 상태만 업데이트하도록 최적화해야 합니다.

예제:

const [state, setState] = useState({ count: 0, users: [] });

const updateUser = (userId, newUserData) => {
  setState(prevState => ({
    ...prevState,
    users: prevState.users.map(user =>
      user.id === userId ? { ...user, ...newUserData } : user
    )
  }));
};

5. 상태 의존성 배열 관리 실수

useEffect와 같은 훅을 사용할 때, 의존성 배열을 제대로 관리하지 않으면 원치 않는 리렌더링이나 비정상적인 동작을 초래할 수 있습니다. 의존성 배열에 필요한 변수를 올바르게 지정하는 것이 중요합니다.

잘못된 예:

useEffect(() => {
  console.log(state.count);
}, [state]); // state 전체를 의존성으로 지정

수정된 예:

useEffect(() => {
  console.log(state.count);
}, [state.count]); // 필요한 상태만 의존성으로 지정

마무리

React에서 상태 관리 실수는 개발자에게 큰 문제를 야기할 수 있습니다. 하지만 이러한 실수를 이해하고 예방하는 방법을 알고 있다면, 더욱 안정적이고 효율적인 애플리케이션을 개발할 수 있습니다. 상태를 불변성을 유지하며 관리하고, 적절한 방법으로 상태를 공유하며, 비동기 작업과 성능을 고려한 상태 업데이트를 구현하면 React 애플리케이션의 품질이 크게 향상될 것입니다.