Next.js의 클라이언트 컴포넌트 경계에 대해

Next.js

siwoli 2024. 4. 3. 02:06

react element는 값이 변하지 않는 상수이며, element 내용의 변경은 곧 새로운 element를 생성한다는 것을 의미한다. (re-render = re-create)

children의 특징

매 렌더링마다 react element들은 새롭게 생성되고, 그로인해 object의 참조값이 변한다.
한번 전달된 prop은 상위 컴포넌트가 리렌더링되지 않는한 갱신되지 않고 이전 prop값을 재사용한다.
부모 컴포넌트는 children을 prop로 받으며 이때 children은 object형태인 상수다.
부모 컴포넌트가 리렌더링될때 children은 상수이므로 값이 달라지지 않아 리렌더링되지 않는다.
children으로 전달되는 react element가 새롭게 생성되면 object의 참조값이 변경되므로 부모 컴포넌트의 prop가 변하고, 부모 컴포넌트가 리렌더링된다.

Container > Parent > Child 컴포넌트가 있을때

Container 컴포넌트가 빈번하게 리렌더링되는 구조라면 Child 컴포넌트도 결국 Container의 자식 컴포넌트이므로 함께 리렌더링된다. 이때 Parent 컴포넌트가 Child 컴포넌트를 children prop으로 받는다면 Child 컴포넌트가 리렌더링될때마다 Parent 컴포넌트도 리렌더링된다. 이런 경우에는 Parent가 Child를 children prop으로 받는대신, 직접 import하고 Parent를 React.memo로 감싸는게 Container의 리렌더링에따른 Parent의 리렌더링을 막아줘 성능 향상을 이룰 수 있다.
반복적으로 쓰이는 레이아웃 컴포넌트에 children prop을 사용하면 재사용성을 높일수 있으며, Container에서 Child로 직접 props를 전달할 수 있어 불필요한 prop drilling을 방지할 수 있다.

여기까지 참고한 곳

React) children prop에 대한 고찰(feat. 렌더링 최적화)

Part 1. 일단, children이 뭔지부터 알아보자! React에서 children이란? React는 JSX라는 문법을 채택하여 사용하고 있다. JSX는 html과 유사한 문법으로 꺽쇠 사이에 태그와 속성을 부여해 프로젝트 구조를

velog.io

children이 서버 컴포넌트라면 next.js 서버에서 렌더링된 후 리렌더링되지 않는다. 따라서 부모 클라이언트 컴포넌트가 리렌더링되지 않는다.
부모 클라이언트 컴포넌트는 children 서버 컴포넌트를 object로 받고 이는 클라이언트 사이드에서 변하지 않는 값이다.
children prop 컴포넌트가 서버액션으로인해 리렌더링되면 부모 컴포넌트도 리렌더링된다. 하지만 역은 성립하지 않으므로 children prop 컴포넌트에서 서버액션을 사용할 수 있다.
children prop이 아니라 부모 컴포넌트 내에서 import한 컴포넌트라면 부모 컴포넌트가 리렌더링될때 자식 컴포넌트도 항상 리렌더링되기 때문에 그때마다 서버액션을 재실행한다. 이것이 Next.js가 클라이언트 컴포넌트 내 import한 컴포넌트에서 서버액션을 사용하지 못하게 한 이유라고 생각한다.
예시로, Next.js에서는 layout.tsx이 page.tsx를 children prop로 받도록 강제하고 있다. 이는 page.tsx가 서버 컴포넌트여야한다는 의미다. 만약 page.tsx가 클라이언트 컴포넌트라면 해당 라우트또는 전체 앱이 CSR될것이다.
더 정확한 이해를 위해서는 리액트의 서버 컴포넌트를 알아봐야 한다.

최상위 클라이언트 컴포넌트의 리렌더링에 의해 새로운 react element가 생성되는 컴포넌트들은 모두 클라이언트 컴포넌트라고 생각한다. 그러므로 하위 서버 컴포넌트들은 상위 클라이언트 컴포넌트에서 children prop으로 받기를 권장한다.

*오류 지적은 언제나 환영입니다