챌린지 49일 차.
ReactDOMServer API
https://ko.reactjs.org/docs/react-dom-server.html
ReactDOMServer – React
A JavaScript library for building user interfaces
ko.reactjs.org
리액트 공식문서에서는 리액트 돔 서버라고 하는 API를 제공한다. 리액트 돔 서버에서 제공하는 renderToString(), renderToStaticMarkup()와 같은 것들을 이용하게되면 서버에서 리액트 컴포넌트들을 렌더링하고 그것을 문자열로 바꿔서 내려줄 수 있게 된다. 이론상으론 간단하지만 실무에서는 여러가지 케이스와 만나면서 개발자들을 힘들게 하는 요소 중 하나이다.
React Server Side Rendering
- 서버에서 응답을 가져올 떄 기존처럼 static file 만을 가져오는 것이 아닌 먼저 서버에서 응답 값을 만들어서 내려주고 후에 static file을 내려준다.
- static file을 다 내려받고 리액트 앱을 브라우저에서 실행한 뒤에는 SPA처럼 동작하게된다.
- React Component를 브라우저가 아니라 Node.js에서 사용한다.
ReactDOMServer.renderToString(<Component명 />)
- 결과가 문자열로 나오며 이것을 응답에 포함시켜서 내려준다.
- 라우팅, 리덕스와 같은 처리를 서버에서 진행하고 내려주기때문에 굉장히 복잡하고 어렵다.
- JSX가 포함된 리액트 코드를 서버에서 읽을 수 있도록 babel설정을 해주어야한다.
패스트캠퍼스 [직장인 실무교육]
프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.
fastcampus.co.kr
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는프론트엔드개발초격차패키지online
