React) useState와 리렌더링 이해하기 (feat. 무한루프)

React 컴포넌트가 실행되는 과정

React의 컴포넌트는 크게 두 가지 단계로 실행된다.

1. 초기 렌더링 (Mount)
   • 컴포넌트가 처음 화면에 나타날 때 실행됨.
   • useState로 선언된 상태가 초기값을 가짐.
   • JSX가 화면에 렌더링됨.
   • useEffect가 실행됨 (조건에 따라 실행될 수도 있고, 실행되지 않을 수도 있음).
2. 리렌더링 (Update)
   • 상태(state)가 변경될 때마다 컴포넌트가 다시 실행됨. 
   • 새로운 state 값을 기반으로 컴포넌트가 다시 실행됨.
   • 다시 JSX가 화면에 렌더링됨. : 화면이 바뀌어야 할 때. 전체 페이지가 아닌 필요한 부분만 업데이트한다.
   • useEffect가 실행됨 (조건에 따라 실행될 수도 있고, 실행되지 않을 수도 있음).

 

리레더링

• useState로 state를 초기화하면,해당 상태가변할때 마다 리렌더링이 발생한다.
• useEffect는 컴포넌트가 렌더링된 후 실행되며, 의존성 배열이 변경될 때마다 실행된다.
• useEffect 내부에서 setState를 호출하면 state가 변경되어 다시 렌더링이 발생한다.
• 잘못된 usEffect 사용시 무한루프가 발생할 수 있다. 이를 방지하려면 빈 배열 ([])을 사용하거나, 특정 조건을 추가해야한다.

 

 

 

코드 흐름을 보면서 React 컴포넌트 렌더링 흐름 분석하기

// 1. 리엑트 훅 임포트문 (useState는 상태관리, useEffect는 렌더링 후 실행)
import { useEffect, useState } from "react";

// 2. APP 컴포넌트 정의
function App() {
  // useState(0): state를 초기값 0으로 설정
  // state는 현재 상태 값이고, setState는 state를 관리하는 함수
  const [state, setState] = useState(0);
  
  // 1) 초기 렌더링 (컴포넌트가 처음 실행된다. 콘솔로그 먼저 출력하고, 후에 useEffect가 실행된다.) state 0
  
  // 현재 state 값을 콘솔에 출력한다.
  console.log("state", state);

  // useEffect: state값이 변경될 때 실행되는 함수
  useEffect(() => {
    // state를 1로 변경하는 함수 호출 -> state값 변경
    setState(1);
  }, [state]); // 의존성 배열 [state]
  
  
  /// 화면에 <div>요소를 렌더링
  return <div className="App"></div>;
}


// 3. APP 컴포넌트 내보내기
export default App;

 

 

1. 초기 렌더링 (컴포넌트가 처음 실행될 때) : 

1. 컴포넌트가 마운트됨

2. useState(0)이 실행됨 -> state의 초기값이 0으로 설정됨

3. 출력값 state 0 

4. <div className="App"></div> 렌더링

4. 컴포넌트의 첫 마운트시 useEffect실행됨.setState(1) ->  state 값이 1로 변경됨

5. React는 상태가 변경되면 리렌더링을 실행하므로, 다시 컴포넌트를 실행함

 

2. 두번째 렌더링 :

1. 컴포넌트가 다시 실행됨

2. 출력값 state 1

3. <div className="APP"></div> 다시 렌더링

4. state가 변경되었으므로 (0->1) useEffect다시 실행 setState(1)로 상태를 1로 변경시도 하지만 값이 이미 1이므로 실제로는 변화 없다. 하지만 내부 함수는 실행된다.

 

 

3. 세번째 렌더링: 

1. 컴포넌트가 다시 실행됨

2. 출력값 state 1

3. state가 이전값과 같으므로 재렌더링 없다.