React children props의 진짜 동작 원리와 Context 리렌더링 이슈 분석

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

개발 툴

대상자

리액트 개발자, 컴포넌트 구조 이해가 필요한 개발자

핵심 요약

• children props는 상위 컴포넌트에서 평가된 ReactElement를 전달받는 방식으로 동작하며, 하위 컴포넌트는 리렌더링 시 재실행되지 않는다.
• useContext를 사용하는 컴포넌트만 Context 상태 변경에 따라 리렌더링 된다.
• children props 대신 JSX 내부에 직접 선언한 경우, 해당 컴포넌트는 부모의 리렌더링에 함께 재실행 된다.

섹션별 세부 요약

1. children props의 동작 원리

• children props는 외부에서 전달된 ReactElement를 그대로 렌더링하는 방식으로, 해당 children은 상위 컴포넌트에서 이미 평가된 상태로 전달된다.
• children을 사용하는 경우, Parent 컴포넌트의 리렌더링은 children의 재실행을 유발하지 않는다.
• children은 JSX 내부에 직접 선언한 경우, Parent 컴포넌트가 실행될 때 즉시 평가 된다.

2. Context 리렌더링 이슈 분석

• TestComp1에서 children props를 사용하는 경우, TestProvider의 상태 변경은 children 재실행 없이 useContext 구독 컴포넌트만 리렌더링 된다.
• TestComp2에서 JSX 내부에 직접 Comp와 CompWithContext를 선언한 경우, 상위 컴포넌트의 상태 변경으로 인해 하위 컴포넌트가 모두 리렌더링된다.
• Context API는 구독 컴포넌트만 영향을 받지만, Provider의 구조에 따라 리렌더링 범위가 달라질 수 있다.

3. 실무적 고려사항

• children props를 사용할 경우, 리렌더링 범위를 제어하기 위해 상태 관리 위치를 신중히 결정해야 한다.
• useContext를 사용하는 컴포넌트는 불필요한 리렌더링을 방지하기 위해 Memoization을 적용할 수 있다.
• JSX 내부에 직접 컴포넌트를 선언하는 경우, 상위 컴포넌트의 상태 변화에 따른 리렌더링 영향을 고려해야 한다.

결론

• children props는 상위 컴포넌트에서 평가된 ReactElement를 전달받는 방식으로, 리렌더링 시 재실행되지 않는다.
• useContext 구독 컴포넌트만 Context 상태 변경에 반응하며, Provider 구조에 따라 리렌더링 범위가 달라질 수 있다.
• 개발 시 컴포넌트의 리렌더링 범위를 명확히 이해하고, children props와 JSX 직접 선언 방식의 차이를 고려해야 한다.