useEffect 기본적인 질문입니다

Question

import React, { useEffect, useState } from 'react'; const App = () => { const [age,setAge]=useState(10) useEffect(()=>{ console.log('useEffect') setAge(1) }) console.log('render') return (

Test

);}; export default App;이 코드를 실행해보면 콘솔창에 renderuseEffectrenderuseEffectrender이렇게 찍힙니다근데 제가 알기로 useEffect 동작 순서가 우선 useEffect를 제외한 나머지가 렌더링이 된다useEffect가 실행이 된다그리고 위의 코드처럼 의존성 배열을 넣지 않으면 렌더링이 될 때마다 effect함수가 실행이 된다이렇게 알고 있습니다그렇다면 위의 코드는 무한루프가 발생해야 하는 것이 아닌가요?저기서 setAge(age+1) 로 하면 무한루프가 뜹니다그래서 제 생각에는 setAge(1)처럼 같은 값으로 상태를 변경해서 중간에 멈춘것 같긴 한데구글링해도 그 원리를 정확히 모르겠네요... 혹시 왜 이러는지 아시는 분 계시면 도와주세요ㅠ

풀스택3년차 · Answer

React에서 리렌더링이 일어나는 조건은 1. Props 변경 2.State 변경 3.부모컴포넌트 리렌더링 3가지 인데 지금 상황은 2번에 해당 됩니다. 그러나 state의 값의 변경이 일어나지 않아서 리렌더링 되지 않습니다.

charlatan · Answer

의존성 배열을 아예 주지 않으면 렌더링이 일어날때마다 useEffect의 콜백이 실행됩니다. 처음 페이지가 렌더링되면 콘솔에 &#34;useEffect&#34;를 출력하고 setAge(1) 가 실행되겠죠? setAge에 의해 상태가 변경되어 다시 렌더링이 됩니다. 그러면 또 콘솔에 &#34;useEffect&#34;가 출력됩니다. 하지만 age는 계속 1이니까 상태가 변경되지 않았으므로 렌더링이 다시 일어나진 않을 겁니다.

useEffect 기본적인 질문입니다

2개의 답변

Q&A 목록