JSX

구성하기내가 원하는 것app.get('/', (req, res) => { const html = createHTML(); res.send(html);});바로 이런 그림이다. 클라이언트와 동일한게 을 렌더링하고, 이걸 초기 HTML로 전송해주는 것이다. 그리고 클라이언트에서는 이렇게 App을 렌더링해줄 것이다.import App from '../src/pages/App';import { hydrate } from '@core/render';hydrate(, document.getElementById('_miniNext')); 이러면 클라이언트와 서버에 대해서 동일한 App컴포넌트를 통해 따로 따로 코드 해당 환경에 맞는 코드를 작성할 필요없이 통합적으로 관리해줄 수 있다. 따라서 필요한 것들을 준비할..

이 글을 읽기에 앞서 이 게시글은 리액트처럼 동작 하는 코드를 작성해보는 것이지 리액트와 100% 동일한 코드를 작성하려 하는 것이 아닙니다. JSX jsx는 javascript + xml의 줄임말이다. 이걸 쓰면 html마냥 쓸수가 있다. 파악해보기 근데 이걸 어떻게 html마냥쓸 수가 있지???라는 생각이 들었다. 이건 과연 내부적으로 어떻게 처리가 되는걸까? 바벨의 트랜스파일링을 확인해보자 링크에서 위 이미지를 직접확인할 수 있다. jsx라는 함수로 변환되는 것을 볼 수 있다. 좀더 복잡한 형태는 어떨까? 요렇게 변환되는 것을 볼 수 있다. jsx함수 파악하기 그럼 jsx함수는 어떻게 작동하는지를 보자 우선 jsx나 jsxs나 똑같이 jsxProd를 호출한다. 그리고 위의 import문을 보면 알 ..