깨달음 (리액트 비동기)

 

#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번 호출되는 결과를 보았다. 왜 그럴까...

 

#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

 

 

[이글을 되돌아 보며] 컴포넌트형 함수는 "함수"다. 컴포넌트가 렌더링될때마다 컴포넌트 안에 정의된 함수, 변수는 최초의 값으로 재선언되어 작동된다. 위 문제는... 컴포넌트 렌더 → 비동기코드 실행 → 결과값을 바탕으로 컴포넌트 내 state값 갱신 → 컨포넌트 리렌더 → 비동기코드 실행 → 결과값을 바탕으로 컴포넌트 내 state값 갱신 → 무한반복

그렇기 떄문에 내가 위에 작성한 오류에 대한 이유는 반쪽짜리 답