React Hooks 상태 최신값을 사용하지 못하는 문제 해결하기

제목: React Hooks 상태 최신값을 사용하지 못하는 문제 해결하기

소개

React Hooks를 사용할 때, 상태 업데이트와 이펙트 동작 방식을 이해하는 것이 중요합니다. 이 블로그 포스트에서는 한 useEffect 훅에서 설정된 상태가 다른 훅에서 제대로 사용되지 않는 일반적인 문제를 다룰 것입니다. React 애플리케이션에서 이 문제를 해결하고 수정하기 위한 단계별 해결책과 설명을 제공할 것입니다.

문제점

이 문제는 같은 상태 객체의 다른 속성을 업데이트하는 두 개의 useEffect 훅이 있는 경우에 발생합니다. 코드를 자세히 살펴보겠습니다:

const [tags, setTags] = useState({
  all: [],
  available: []
});

const setAllTags = () => {
  const all = ["tag 1", "tag 2", "tag 3"];
  const newValue = {
    ...tags,
    all
  };
  setTags(newValue);
};

const setAvailableTags = () => {
  const available = ["tag 1", "tag 2"];
  const newValue = {
    ...tags,
    available
  };
  setTags(newValue);
};

useEffect(setAllTags, []);
useEffect(setAvailableTags, []);

여기서 setAllTags 함수는 tags 상태의 “all” 속성을 업데이트하고, setAvailableTags 함수는 “available” 속성을 업데이트합니다. 하지만 setAvailableTags가 호출될 때, 이전에 가져온 태그들이 손실되도록 “all” 속성이 빈 배열로 덮어씌워집니다.

해결책

해결책 1: 함수형 업데이트 사용하기

이 문제를 해결하는 한 가지 방법은 useState의 함수형 업데이트 형태를 사용하는 것입니다:

const setAllTags = () => {
  const all = ["tag 1", "tag 2", "tag 3"];
  setTags(currentTags => ({...currentTags, all}));
};

const setAvailableTags = () => {
  const available = ["tag 1", "tag 2"];
  setTags(currentTags => ({...currentTags, available}));
};

setTags에 함수를 전달함으로써 현재 상태에 접근하고 새 값과 기존 값들을 병합하여 두 속성이 올바르게 업데이트되도록 할 수 있습니다.

해결책 2: 별개의 상태 변수 사용하기

다른 방법은 tags 상태를 두 개의 개별 변수로 분리하는 것입니다:

const [allTags, setAllTags] = useState([]);
const [availableTags, setAvailableTags] = useState([]);

const fetchAllTags = () => {
  const all = ["tag 1", "tag 2", "tag 3"];
  setAllTags(all);
};

const fetchAvailableTags = () => {
  const available = ["tag 1", "tag 2"];
  setAvailableTags(available);
};

useEffect(fetchAllTags, []);
useEffect(fetchAvailableTags, []);

상태를 개별적으로 관리함으로써, 각 useEffect 훅은 관련된 상태 변수만 업데이트하며, 상태가 업데이트되는 동안 값이 덮어씌워지거나 손실되지 않도록 할 수 있습니다.

결론

React Hooks는 상태 관리를 더 효율적으로 만들고 스트리밍 라인을 제공하지만, 상태 업데이트와 이펙트 동작의 복잡성을 이해하는 것이 중요합니다. 이 블로그 포스트에서는 React Hooks 상태가 다른 훅에서 최신 업데이트를 사용하지 못하는 문제를 해결했습니다. 이 문제에 대한 두 가지 해결책을 제시하여 애플리케이션의 요구에 가장 적합한 방식을 선택할 수 있습니다. 이러한 해결책을 구현함으로써 React 애플리케이션의 상태가 올바르게 업데이트되고 필요한 모든 데이터가 보존되도록 할 수 있습니다.

참고 자료 :

https://stackoverflow.com/questions/55221449/react-hooks-state-not-using-latest

같은 카테고리의 다른 글 보기 :

reactjs