리렌더링
리액트에서 리렌더링은 컴포넌트의 UI를 업데이트하는 과정을 말한다. 이를 통해 사용자가 상호작용하는 애플리케이션의 UI를 동적으로 제어할 수 있다.
리렌더링 발생 조건
-
컴포넌트가 Props나 State 값을 변경하면 해당 컴포넌트는 리렌더링된다. Props나 State의 값이 변경되면 해당 값을 참조하는 컴포넌트의 UI가 자동으로 업데이트된다.
-
부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 함께 리렌더링된다.
부모 컴포넌트가 리렌더링되면 자식 컴포넌트의 Props 값도 함께 변경된다.
- useState, useContext, useReducer 등의 Hooks를 사용하여 상태값이 변경되면 해당 컴포넌트가 리렌더링된다.
React.memo()를 사용하여 Props가 변경되었을 때만 리렌더링되도록 설정할 수 있다.
React.memo()는 Props 값이 변경되었을 때만 컴포넌트를 리렌더링하도록 설정한다. 이를 통해 Props 값이 변경되지 않았을 때는 이전에 렌더링한 결과를 재사용할 수 있다.
이 외에도 컴포넌트가 마운트(컴포넌트가 최초로 화면에 나타남)될 때, forceUpdate() 함수(강제로 컴포넌트를 리렌더링할 때 사용)가 호출될 때 등 다양한 상황에서 리렌더링이 발생한다.
