리액트 서버컴포넌트 , 클라이언트 컴포넌트

넥제 서버컴포넌트 안에서도 변수 사용이 가능하다.

 

RSC (Default)

react-server-component

데이터 패칭 ! axos나 fetch api를 사용해서 하는 작업을 용도로.

server Actions

 

RCC (선택사항)

react-Client-component <= 'use client'

사용자와 상호작용하기 위한 컴포넌트

useState , useEffect등 훅 사용가능.

 

 

넥제가 이렇게 두개가 나뉘는 이유는

각각의 역할이 다르기 때문이다.

 

컴포넌트 트리를 구현할 때 신경써야 하는 부분

 

서버(상단) - 클라이언트(하단) 이렇게는 적용이 괜찮은데

 

클라(상단) - 서버(하단) 이렇게 트리구조가 되면 ,

서버는 client 컴포넌트가 되는 것이다.

 

클라컴포는 서버컴포넌트에서 실행된다.

---

요약 : 서버컴(상) - 클라(하) => 이러면 정상

클라 (상) - 서버컴(하) 이러면 걍 서버컴포넌트가 아님ㅇㅇ

 

 

컴포넌트 트리 전략

클라이언트 컴포를 최대한 뿌리 쪽에 배치해라.

클라 밑에 서버컴포가 있으면 안된다!