ddaeunbblog

오늘은 3장의 리액트 훅과 4-1장의 서버사이드 렌더링에 대해서 읽고 포스팅합니다.
2장 끝의 메모제이션과, 3장의 리액트 훅 깊게 살펴보기를 보면서, 이전에 정리했던 렌더링이 되는 조건들과 내용이 매우 비슷하다고 느꼈습니다.

아래 우아한테크톡에서 렌더링 최적화하는 글을 보고 많은 걸 깨달았는데요, 아래 영상 내용과 3장의 useCallback, useMemo내용들이 너무 일맥상통해서 링크를 심어둡니다.
[10분 테코톡] 앨버의 리액트 렌더링 최적화

useContext 내용 전까지 확실하게 이해한 바는,
매 렌더링 마다 아래와 같은 내용이 수행됩니다.

컴포넌트가 실행됩니다. (즉, 함수형 컴포넌트의 내부 코드가 렌더링되면 재실행됩니다.)
그렇기 때문에, 내부에 정의한 함수들은 이전 렌더링과 다른 참조값을 가집니다.
그래서 useCallback을 사용하는 것이 좋습니다.
하지만 이는 Render Phase에서는 실행되고, Commit Phase는 실행되지 않게 됩니다.
Commit Phase도 진행되지 않게 하려면 memo를 사용해 컴포넌트를 기억하게 합니다.

📌 useContext를 사용할 때 주의할 점

저는 props drilling을 해결하기 위해서 useContext가 성능 최적화를 위해 필요할거라고 생각하고 착각했던 부분이 있었다는 것을 알게 되었습니다. useContext는 상태 관리를 위한 라이브러리가 아니고 콘텍스트는 상태를 주입해주는 API입니다.

상태관리 라이브러리가 되기 위해서는 두 가지 조건이 필요하다고 합니다.

어떠한 상태를 기반으로 다른 상태를 만들어 낼 수 있어야 한다.
필요에 따라 이러한 상태 변화를 최적화할 수 있어야 한다.

그러나 컨텍스트는 이 둘 모두 할 수 없다고 합니다. props값을 하위로 전달해 줄 뿐, useContext를 사용한다고 해서 렌더링이 최적화 되진 않습니다. 또한 useContext를 사용한다는 것은 Provider와 의존성을 갖게 되는 셈이기 때문에, useContext를 사용하기 위해서는 컴포넌트의 범위를 최대한 작게하거나 하는 것이 좋습니다.

📌 고차 컴포넌트란 무엇인가?

책의 예제에서는 함수의 매개변수로 컴포넌트를 받고, 조건에 따라 컴포넌트를 리턴하는 예제를 보여주고 있었습니다.

interface LoginProps {
  loginRequired?: boolean;  
}
 
function withLoading<T>(Component: ComponentType<T>){
  return function (props: T & LoginProps) {
    const { loginRequired, ...restProps } = props;
 
    if(loginRequired) {
      return <h1>로그인이 필요합니다.</h1>
    }
 
    return <Component {...(restProps as T)} />
  }
}
 
const Component = withLoading((props: {value: string}) => {
  return <h3>{props.value}</h3>
})
 
export default function App() {
  const isLogin = true;
  return <Component value="text" loginRequired={isLogin} />
}

따라서 HoC는 컴포넌트를 인자로 받아, 새로운 컴포넌트를 반환하는 함수입니다.

📌 SPA와 SSG의 차이 및 Next.js에서의 서버 컴포넌트, 클라이언트 컴포넌트?

이전에 Next.js로 이 블로그를 만들면서, Next.js는 매번 새로운 페이지를 렌더링해서 서버에서 클라이언트에게 보내주는 건가? 라는 의문이 들었었는데요, 실은 Next.js도 맨 첫페이지는 정적으로 보여주고, 이후 JS 번들이나 스트림 형식을 통해 페이지를 렌더링한다는 것을 알게 되었습니다.

그래서 책에서도 아래와 같이 나와있습니다.

최초 웹사이트 진입 시에는 서버 사이드 렌더링 방식으로 서버에서 완성된 HTML을 제공받고, 이후 라우팅에서는 서버에서 내려받은 자바스크립트를 바탕으로 마치 싱글 페이지 애플리케이션처럼 작동한다.

따라서 우리가 알고있는 Next.js나 Remix 프레임워크는 모두 전통적인 SSG 방법으로 렌더링되는 것이 아닙니다.
사용자의 설정에 따라서 SSG를 설정할 수도 있고, ISR를 설정할 수도 있습니다.

Next.js의 프리렌더링, SSR, SSG
React Server Component 톺아보기

Next.js의 렌더링 과정에 대해서 자세히 기술한 블로그가 있어 함께 참고합니다.
[Next.js] Hydration

리액트 딥다이브 살펴보기 VII

📌 useContext를 사용할 때 주의할 점

📌 고차 컴포넌트란 무엇인가?

📌 SPA와 SSG의 차이 및 Next.js에서의 서버 컴포넌트, 클라이언트 컴포넌트?