[ React ] useState, useEffect 동작 방식 이해

우선 React를 사용한다면 useState, useEffect, redux 등등... 기초적으로 알게 되는 것들이 있다.

 

오늘은 그 중 useState와 useEffect의 동작 방식을 이해해볼까한다.

 

아래 코드에서는 무슨일이 일어나며 어떻게 동작할지 알아보자.

과연 콘솔에는 어떻게 찍힐까?

init
[ 1 ] state => 0
[ 2 ] state => 0
init
[ 1 ] state => 1

이렇게 찍힐 것이다.

선형 실행 되면서 setState가 비동기로 처리되기 때문에 다시 한 번 선형 실행되게 된다.

useEffect의 종속성 배열 부분에는 아무것도 선언하지 않았기에 그대로 끝이다.

 

다음 코드를 보자.

과연 이번에는 어떻게 찍힐까?

종속성 배열 부분에 stsate를 추가했으니

state => 0
state => 1
state => 1

이렇게 실행 될 것이다.

 

마찬가지로 선형 실행으로 state => 0이 찍히고, useEffect안에서 setState(1)을 하게 된다.

 

이 때,

setState(1)은 비동기로 업데이트되기 때문에 즉시 값이 반영되지는 않는다.

대신 이벤트 루프의 다음 사이클에서 state를 업데이트하고 그 결과로 컴포넌트가 리렌더링된다.

 

그러고나서,

state의 값이 0 --> 1로 변경되었으니 useEffect의 종속성 배열에있는 state로 인하여

다시 useEffect가 실행되며 같은 현상이 일어난다.

 

이런 흐름으로 콘솔이 0, 1, 1 값이 찍히는 것이다.

 

다음 글에는 이벤트 루프와 동기 / 비동기에 대하여 정리해보도록 하겠다..

 

여기서 필자는 궁금해진다.

이 아래 내용은 본문과는 논외이기에 읽지 않아도 무방하다.

이렇게하면 무한루프를 만들 수 있지 않을까?

useEffect안에서 count를 증감시키고 그로 인해서 다음 이벤트 루프로 향하고 또또또.. 하지만 이것은 틀렸다.

let count = 0도 같이 실행되기에.

 

function App () {...} 밖으로 빼주면 된다.

띠로리링... 무한루프로 만들지 않게 주의하도록 하자.