React에서 html과 css 추출하기

 

 

  운영 업무 중에 퍼블리셔 산출물에 대한 요청을 받았다. 사실 우리 프로젝트가 너무 심각하게 엉망이었던지라 프로젝트 도중 퍼블리셔가 런을 했었다. 거기에다가 디자이너 역시 중간에 이탈했다. 그러다 보니 퍼블리싱이 진행되지 못했고, 심지어 진행됐던 퍼블리싱 소스 역시 디자이너가 그만두게 되면서 디자인이 바뀌어버리는 바람에 쓸모없게 됐다. 

  결국 프론트 개발자인 내가 figma를 기준으로 React에서 퍼블리싱을 해가며 개발을 해야 했다. 그러다 보니 당연히 제출해야 할 퍼블리셔 산출물이 없을 수밖에 없었다. 결국 내게 이 것을 요청했고, 나는 React에서 추출하는 방법으로 진행해 보겠다고 답을 했다.

  React는 가상 DOM을 사용하기 때문에 그냥 html과 css를 추출하는 게 쉬운 것이 아니다. 그래서 사용한 것이 react-dom/server이다. 

import ReactDOMServer from 'react-dom/server'

const html = ReactDOMServer.renderToStaticMarkup(...)
console.log(html)

html을 추출하기 위해 renderToStaticMarkup 메소드를 활용했다. 위와 같이 작성하면 콘솔창에 html이 출력된다.

  css의 경우 우리 프로젝트에서 styled-components를 사용해서 지역적으로 관리하고 사용하다 보니 따로 이 역시 따로 추출이 필요했다. 물론 전역적으로 사용한다면 이런 작업은 필요 없었을 것이다.

import ReactDOMServer from 'react-dom/server'
import { ServerStyleSheet } from 'styled-components'

const sheet = new ServerStyleSheet();
ReactDOMServer.renderToStaticMarkup(
	sheet.collectStyles(...)
)

console.log(sheet.getStyleTags());

 

최종적으로 내가 작업한 코드는 이러했다.

import ReactDOMServer from 'react-dom/server'
import { ServerStyleSheet } from 'styled-compoenents'

const sheet = new ServerStyleSheet();
const html = ReactDOMServer.renderToStaticMarkup(
	sheet.collectStyles(<Component />)
)
const styleTags = sheet.getStyleTags();

fs.writeFileSync('component.html', html);
fs.writeFileSync('style.css', styleTags);

위와 같이 fs를 통해 파일로 저장할 수도 있다.