DIL: 모던 리액트 딥 다이브, 4주차-4

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

---

DIL-week4-4_2024-03-28

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ------ | ------------------------------- | ----------- | | 4주차 | 4, 8장 | SSR과 ESlint, 테스트 라이브러리 | 314p~329p |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 9시~10시,10시반~11시

---

Next.js 톺아보기

Data Fetching

getServerSideProps 비교

| 함수 | 기능 | 참고 | 빌드 시 생성 | | ------------------ | ----------------------------------------------- | ---------------------------------------------------------- | ------------ | | getStaticPaths | 접근 가능한 주소를 배열로 반환 | 그 외의 페이지는 404 | html | | getStaticProps | 접근 가능한 주소로 요청이 왔을 때, 반환할 props | params를 기준으로 props로 전달할 요청/응답을 서버에서 처리 | json | | getServerSideProps | 서버에서 실행되는 함수 | 페이지 진입 전 무조건 실행 | js |

• HTML 랜더 결과 > getServerSideProps 반환 값 기반으로 페이지 랜더링
  • 서버 사이드 랜더링이 getServerSideProps 실행과 함께 이루어짐
• 서버 사이드 랜더링
  1. 서버에서 랜더링에서 필요한 정보 패칭
  2. 1을 기반으로 HTML 완성
  3. 2를 클라이언트에 전달
  4. 3을 바탕으로 hydrate (DOM에 리액트 라이프 사이클과 이벤트 핸들러 추가)
  5. 4의 hydrate을 통해 만든 리액트 컴포넌트 트리와, 서버에서 만든 HTML이 다르면 불일치 에러
  • suppressHydrationWarning
  6. 5번도 1처럼 패칭해서 정보를 가져와야 한다.

     1과 6 작업 사이 패칭한 데이터 결과의 불일치가 발생할 수 있으므로 -> 1번 정보를 HTML에 script로 내려줌 (시점 차이로 인한 차이 막음)

• window에도 저장한다.
  • window.__NEXT_DATA__
• props의 결과를 HTML에 정적으로 작성해서 내려주기 때문에 => JSON으로 serialize할 수 없는 값은 저장할 수 없다.
• 서버에서만 실행
  • window, documentX: 브라우저에서 접근할 수 있는 객체에 접근 x
  • protocol과 도메인 필요: 자신의 호스트를 유추할 수 없다. (완전한 주소 필요)
  • 에러 핸들링: 미리 정의해둔 500.tsx로 리다이렉트
• redirect 예시 => getStaticPaths에 post가 없을 시 redirect /404
• getInitialProps
  • 과거에 getStaticProps, getServerSideProps 대신 사용
  • _app.tsx, _error.tsx에서는 getInitialProps 써야함

    https://nextjs.org/docs/pages/api-reference/functions/get-initial-props Good to know: getInitialProps is a legacy API. We recommend using getStaticProps or getServerSideProps instead.

  • 특징만 알아두기 - 루트 함수에 정적 메서드 추가 Todo.getInitialProps = ()=> {} - Props가 아니라 바로 객체 반환! - 클라이언트와 서버에서 실행 - pathname, asPath, query, req, res

| 파일 | 사용 이유 | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | _app.tsx | 모든 페이지 요청에 공통되는 레이아웃, 페이지 전환, 상태 관리 등을 처리함.서버에서 미리 가져와야 하는 데이터가 여러 페이지에 걸쳐 있을 경우, 중앙에서 데이터 로딩 로직을 관리하고 각 페이지에 props로 전달할 수 있음. | | _error.tsx | 애플리케이션에서 발생하는 모든 오류를 처리하는 커스텀 오류 페이지. 특정 오류 상황(예: 404, 500 에러)에서 추가적인 정보나 추천 콘텐츠 등을 서버로부터 미리 로드해야 할 때 사용함. |

스타일

| 구분 | 적용 | 예시 | | ------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | 전역 스타일 | _app.tsx에서 import | 경로 혹은 node_module에서 꺼내기 | | 컴포넌트 레벨 | [name].module.css | Button의 className={style.alert}의 클래스는 Button_alert__62TEJ | | SCSS, SASS | sass 설치 | $primary: blue; (변수):export { // styels primary: $primary (변수의 값 사용)} | | CSS-in-JS | styled-components, Emotion | styled-component를 Next.js에서 쓰려면 → ServerStyleSheet 필요 (getInitialProps, 서버에서 스타일을 미리 모아서 일괄 적용/초기화) |

[!CAUTION]
https://nextjs.org/docs/app/building-your-application/styling/css-in-js
경고: 런타임 JavaScript가 필요한 CSS-in-JS 라이브러리는 현재 서버 구성 요소에서 지원되지 않습니다. 서버 구성 요소 및 스트리밍과 같은 최신 React 기능과 함께 CSS-in-JS를 사용하려면 라이브러리 작성자가 동시 렌더링을 포함하여 최신 버전의 React를 지원해야 합니다..

우리는 업스트림 API에 대해 React 팀과 협력하여 React 서버 구성 요소 및 스트리밍 아키텍처에 대한 지원을 통해 CSS 및 JavaScript 자산을 처리하고 있습니다.

• styled-component는 프로덕션 모드에서 SPEEDY_MODE
  • CSSOM 트리에 직접 스타일을 먹임 (InsertRule)