-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
안녕하세요 Hook에서 렌더링 질문있습니다.
22.03.21 17:34 작성 조회수 131
0
hook에서 다음과 같은 코드로 렌더링을 몇번 발생하는지 확인해 보았습니다.
첫번째 코드
function App () {
const [one, setOne] = useState(0);
const [two, setTwo] = useState(0);
useEffect(()=>{
setOne(prev => prev + 1);
setTwo(prev => prev + 1);
}, []);
console.log('렌더링!');
return (
<>
{one}{two}
</>
);
}
두번째 코드
function App () {
const [one, setOne] = useState(0);
const [two, setTwo] = useState(0);
useEffect(()=>{
setTimeout(()=>{
setOne(prev => prev + 1);
setTwo(prev => prev + 1);
}, 1000);
}, []);
console.log('렌더링!');
return (
<>
{one}{two}
</>
);
브라우저 콘솔을 확인한 결과, 첫번째 코드는 렌더링이 2번, 두번째 코드는 렌더링이 3번 발생했습니다.
초기 렌더링을 제외하면,
첫번째 코드에서는 react가 setOne과 setTwo를 한번에 처리해줘서 추가적으로 렌더링이 1번 발생한 것 같고,
두번째 코드에서는 react가 setOne과 setTwo를 각각 따로 한번씩 처리해줘서 렌더링이 2번 발생한 것 같은데...
첫번째와 두번째 각각 왜 이러한 현상이 발생하는 건지 궁금합니다..ㅠㅠ
답변을 작성해보세요.
1
조현영
지식공유자2022.03.21
첫번째가 기본적인 동작이고요. 원래 setState 여러 개를 합쳐서 한 번에 반영합니다.
다만 두번째처럼 setTimeout이나 promise같은 비동기 안에 있으면 리액트가 이걸 제대로 파악하지 못해 따로따로 리렌더링이 되어버립니다. 이 현상은 리액트 18에서 개선되었던 것 같습니다.
답변 1