useEffect에서 useState를 동기로 쓸 수 있는 방법이 있을까요?

우선 올려주신 코드가 제대로 동작을 하는게 맞을까요? 처음 company는 null로 할당하는데 fetchCompany 함수에서 company?.id가 true일때 동작하기 때문에 getCompanyInfo 함수도 동작하지 않을 것으로 보입니다. => 10번째줄만 if (!company?.id) 로 변경하면 await 이후에 setLoading(false) 문제 없이 동작할거 같습니다. 추가로 코드를 보니 다음과 같은 변경을 하면 혹시 모를 사이드이펙트를 줄일 수 있어 보입니다. - useEffect에서 외부 함수인 getCompanyInfo를 사용하니 useCallback으로 선언하고 의존성 배열에 추가해주는 것이 좋겠습니다. - 처음에 company 값을 null로 할당하려면 타입 선언을 <{id?: number; name: string} | null>로 하거나 null이 아닌 {name: ''}로 할당하는 것이 좋겠습니다. (타입 에러)

React의 'useState' 훅은 비동기적으로 작동하기 때문에 'setCompany' 함수에 콜백 함수를 전달하여 동기적으로 값을 업데이트하는 방법은 제공되지 않습니다. 이는 React의 렌더링과 상태 업데이트의 동작 방식으로 인한 제약사항입니다. 그러나 'useEffect' 훅 안에서 상태를 동기적으로 업데이트하고 싶다면, 'loading' 상태를 사용하여 비동기 호출이 완료될 때까지 로딩 상태를 관리하는 방법을 고려할 수 있습니다. 예를 들어 다음과 같이 작성할 수 있습니다: 위의 예시에서 'loading' 상태를 사용하여 비동기 호출이 진행 중인 동안 로딩 상태를 관리하고, 'setLoading' 함수를 사용하여 동기적으로 'loading' 상태를 변경합니다. 이를 통해 로딩 상태에 따라 UI를 조건부로 렌더링할 수 있습니다. 그러나 상태 업데이트를 동기적으로 처리하는 것은 React의 기본 동작을 벗어나는 것이기 때문에 위의 방법을 사용하는 것은 상태 관리에 일시적인 해결책이 될 수 있습니다. React의 비동기 렌더링과 상태 업데이트 모델을 적절하게 활용하는 것이 좋습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const [loading, setLoading] = useState(false);
const [company, setCompany] = useState<{ id?: number; name: string }>(null);

const getCompanyInfo = async () => {
  const companyInfo = await getCompanyInfoAPI(); // API 요청
  setCompany(companyInfo);
};

useEffect(() => {
  const fetchCompany = async () => {
    if (company?.id) {
      setLoading(true);
      await getCompanyInfo();
      setLoading(false);
    }
  };
  
  if (company?.id) {
    fetchCompany();
  }
}, [company?.id]);

// 이후 로딩 상태에 따라 UI를 조건부 렌더링할 수 있음
if (loading) {
  return <div>Loading...</div>;
}

return <div>{company?.name}</div>;