JSX에서 <br/>태그를 사용하면, 적용되지 않은 채 문자열 그대로 렌더링 된다. React는 무조건 텍스트형태로만 페이지를 렌더링하도록 설계되어있기 때문이다.
1. JSX 개념 바로잡기
나는 지금까지 리액트 컴포넌트가 자바스크립트 부분과, html 부분으로 구성되어 있다고 생각해왔었다.
export default function App() {
//return 바깥 부분이 js 영역
return (
//return 내부가 html 영역
<div>
<input type="text">
</div>
);
}
그래서 컴포넌트 작성과 관련된 문제를 해결하기 위해 구글링할 때마다 헷갈렸나보다.
왜 리액트 파일은 .js 파일인데 자바스크립트도 쓰이고 html도 쓰이는건지, 어떤 경우에 리액트에서 html에 자바스크립트 문법을 사용할 수 있는건지, 또 왜 어쩔때는 안되는건지 등등. 리액트에서 쓰이는 문법을 정확히 이해하지 못하고 있었기 때문에 구글링도 중구난망 엉망진창 비효율적일 수밖에 없었다.
답변의 키워드는 항상 jsx였고, 그래서 jsx를 막연히 리액트에서 쓰이는 자바스크립트라고 이해하고 있었다. 이 말은 반은 맞고 반은 틀린 말이다.
이제 내 잘못된 개념을 바로잡자면,
위 코드에서 내가 html 영역이라고 생각했던 부분이 바로 jsx 영역이다.
즉, jsx는 html처럼 생겼지만 html이 아니라 자바스크립트다.
자바스크립트 확장판이 딱 적절한 말이다.
리액트 개발을 쉽게 하기 위해서, HTML 과 비슷한 문법인 jsx 작성을 하면 이를 React.createElement 를 사용하는 자바스크립트 형태로 변환해왔던 것이다.
