깨달음 (리액트 비동기)

 

상황 #1 

const 컴포넌트 = ( ) => {

    const [ jobNames, setJobNames ] = useState(null);
     
    const data = new Database();
    const jobs = data.getData("JOB_INFO"); ← 비동기로 작동되어 특정 값을 전달

    jobs.then( result => {
        setJobNames( result[0].JOBS ); 
        console.log(jobNames); // 무한 반복
    });
}

 

위는 바보같은 내가 처음 작성했던 코드다. 비동기 호출은 컴포넌트 안에서 하면 안된다!! 이유는 확실하지는 않지만 setJobNames가 호출될때 마다 컴포넌트는 다시 그리게 되는데 이때 비동기 호출이 담겨져있는 변수는 계속 새롭게 정의되기 때문인 것 같다. 그러므로 해당 컴포넌트는 무한으로 랜더되고 있었던 것이다. 콘솔창에도 그러한 내용의 에러 메시지를 던져주고 있었다.

그러므로 비동기 호출을 하는 변수를 컴포넌트 밖으로 빼내어 사용해야 한다.

 

상황 #2

const data = new Database();
const jobs = data.getData("JOB_INFO"); ← 비동기로 작동되어 특정 값을 전달

const 컴포넌트 = ( ) => {
    const [ jobNames, setJobNames ] = useState(null);

    const data = new Database();
    const jobs = data.getData("JOB_INFO"); ← 비동기로 작동되어 특정 값을 전달

    jobs.then( result => {

        console.log(jobNames); // 2번 호출이 되더라

    });
}

 

이번에는 setJobNames 가 2번 호출되는 결과를 보았다. 왜 그럴까...(2025.01.23 수정 → strict mode 때문에)

 

상황 #3

const [ jobNames, setJobNames ] = useState(null);

 useEffect(() => {
    jobs.then((result) => {
    setJobNames(result[0].JOBS);
});

 

useEffect의 2번째 인자로 빈 배열을 정의해 1회만 실행되도록하여 비동기와 관련된 동적 요소그리기를 마무리할 수 있었다.

 

suspense컴포넌트가 위와 같이 비동기 처리방식을 보다 효율적으로 처리할 수 있는 것으로 들었다. 한번 공부해보도록 하다.

https://www.youtube.com/watch?v=8q7OQSPLF4k&t=572s