4week
김연수
Study

4주차

04.서버사이드 렌더링

싱글 페이지 애플리케이션 : 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식

→ 더 편한 개발 경험 제공 , 더욱 간편하게 제작 가능

서버 사이드 렌더링

장점

  • 최초 페이지 진입이 비교적 빠르다
  • 검색 엔진과 SNS 공유 등 메타데이터 제공이 쉽다
  • 누적 레01아웃 이동이 적다
  • 시용자의 디바01스 성능에 비교적 자유롭다

단점

  • 소스코드를 작성할 때 항상 서버를 고려해야 한다
  • 적절한서버가구축돼있어야한다
  • 서비스지연에따른문제

싱글 페이지 애플리케이션 vs 서버 사이드 렌더링 애플리케이션

  • 가장 뛰어난 싱글 페이지 애플리케이션은 가장 뛰어난 멀티 페이지 애플리케이션보다 낫다.
  • 평균적인 싱글 페이지 애플러케이선은 평균적인 멀티 페이지 애플리케이선보다 느리다.

서버 사이드 렌더링을 위한 리액트 API

renderToString : 인수로 넘겨받은 리액트 컴포넌트를 렌더링해 HTML 문자 열로반환하는함수

renderToStaticMarkup: 리액트 컴포넌트를 기준으 로 HTML 문자열을 만든다 But 루트 요소에 추가한 data- reactroot와 같은 리액트에서만 사용하는 추가적인 DOM 속성을 만들지 않는다

renderToNodeStream: 브라우저에서 사용하는 것이 완전히 불가능 , 완전히 Node.js 환경에 의존 , 결과물 Node.js의 ReadableStream→ string을 얻기 위해서는 추가적인 처리가 필요하다.

renderToStaticNodeStream : 순수 HTML 결 과물이 필요할 때 사용하는 메서드

hydrate : renderToString과 renderToNodeStream으로 생성된 HTML 콘벤 츠에 자바스크립트 핸들러나 이벤트를 붙이는 역할

Next.js 톺아보기

Next.js 는 vercel 이라는미국스타트업에서만든 리액트기반 서버사이드렌더링 프레임워크

실제 디렉터리 구조가 곧 URL로 변환됨

pages/404.tsx : 원하는 스타일의 404 페이지를 이곳에서 만들 수 있다.

/pages/api/hello.ts : 서버의 API를 정의하는 폴더, /pages/api/hello.ts는 /api/hello로 호출할 수 있으며， 이 주소는 다른 pages 파일과 다르게 HTML 요청을 하는 게 아니라 단순히 서버 요청을 주고받게 된다.

getServerSideProps : 서버에서 실행되는 함수이 며 해당 함수가 있다면 무조건 페이지 진입 전에 이 함수를 실행 , 응답값에 따라 페이지의 루트 컴포넌트에 props를 반환할 수도， 혹은 다른 페이지로 리다이렉트 ,

props로 내려줄 수 있는 값은 JSON으로 제공할 수 있는 값으로 제한

꼭 최초에 보여줘야 히는 데이터가 아니라면 getServerSideProps보다는 클라이언트에서 호출하 는 것이 더 유리함

getlnitialProps : 대부분의 경우에는 getStaticProps나 getServerSideProps를 사용하는 것을 권장하며，getInitialProps는 굉장히 제한적인 예시에서만 사용

05. 리액트와 상태관리라이브러리

  • Flux 패턴의등장 : 양방향이 아닌 단방향으로 데이터 흐름을 변경히는 것을 제안
  • 리덕스의 등장: Elm 아키텍처를 도입 : Elm은 웹페이지를 선언적으로 작성하기 위한 언어
  • Context API와 useContext
  • 혹의 탄생， 그리고 React Query와 SWR
  • Recoil, Zustand, Jotai, Valtio에 이르기까지

리액트 훅으로 시작하는 상태 관리

useState와 useReducer

→ 약간의 구현상의 차이만 있을 뿐，두 훅 모두 지역 상태 관리를 위해 만들어졌다

지역 상태 태의 한계를 벗어나보자 : useState의 상태를 바깥으로 분리하기

useState와 Context를 동시에 사용해 보기

상태 관리 라01브러리 Recoil, Jotai, Zustand 살펴보기

  • Recoil
    • RecoilRoot를 애플리케이션의 최상단에 선언
    • useStoreRef로 ancestorStoreRef의 존재를 확인
    • notifyComponents는 store, 그리고 상태를 전파할 storeState를 인수로 받아 이 스토어를 사용하고 있는 하위의존성을모두검색한다음， 여기에있는컴포넌트들을 모두확인해 콜백을 실행
  • atom
    • Recoil의 최소 상태 단위
    • atom은 key 값을 필수로 가지며， 이 키는 다른 atom과 구별하는 식별자가 되는 필수 값
    • useRecoilValue는 atom의 값을 읽어오는 훅
  • Jotai
    • atom 개념이 존재
    • Jotai는 atom을 생성할 때 별도의 key를 넘겨주지 않아도 된다
    • useAtomValue , useAtom
  • Zustand
    • 하나의 하나의 스토어를 중앙 집중형으 로 활용해 이 스토어 내부에서 상태를 관리하고 있다.
    • state 변수 : 스토어의 상태값을 담아두는 곳
    • partial과 replace로 나눠져 있다
AboutAbout