글의 목적 typeScript가 어떤 과정을 거쳐 js 코드가 되는지 알아본다. 트랜스파일링 JSX코드는 브라우저에서 바로 실행할 수 없다. typeScript 코드도 마찬가지이다. 그러면 JSX코드나 ts 코드 ( TSX )를 js 코드로 바꾸어주어야 하는데 이 과정이 트랜스파일링 과정이다. 이때 TSX 코드를 브라우저가 해석할 수 있는 js코드로 바꾸는 방법은 두 가지가 있다. 1. TSX 코드를 바로 js 코드로 번역 2. TSX 코드를 JSX 코드로 번역하고 번들러가 JSX 코드를 js 코드로 번역 이 파일의 jsx 옵션이 위의 방식을 결정한다. react나 react-jsx의 경우 1번 방법으로 번역하고 preserve의 경우 2번 방법으로 번역한다. vite, react-create-app, ..

글을 쓰게 된 이유 react 개발을 하면서 항상 부딪혔던 문제는 return의 JSX 내용을 어떻게 component body으로 가져올 수 있을까였다. return문의 DOM 요소에 따라 다른 본문을 작성하고 싶은데.. 따라서 해결 방법을 정리해보려 글을 쓴다. 문제 상황 이 코드에서 handleClick의 주석이 달린 부분을 작성하고 싶다. 해결 방법 멘탈 모델 자체가 'return을 본문으로 끌어오기'가 아니라 '본문의 JS 코드를 return 안으로 가져가기'가 되어야 한다. 일반적으로 react 함수형 컴포넌트에서는 component body에는 JavaScript 구문을, return에는 JSX 문법을 사용하게 된다. 이때 return문 안에는 JavaScript 코드를 작성해도 프로그램이 ..