JSX

DOM API만으로 화면을 만들면 createElement 호출이 길게 늘어나고, 문자열 템플릿으로 HTML을 조립하면 값 치환과 구조 읽기가 금방 뒤엉킵니다. 화면이 상태에 따라 자주 바뀌는 애플리케이션에서는 UI 구조와 값을 어떻게 연결하는지 한눈에 보이지 않으면 유지보수가 빠르게 어려워집니다.

초기 프론트엔드에서는 템플릿 파일과 자바스크립트 파일을 분리하는 것이 정리된 방식처럼 보였습니다. 하지만 상호작용이 늘어나자 마크업은 자바스크립트의 조건과 반복에 강하게 의존하게 됐고, 구조와 로직을 물리적으로 떼어 놓는 것이 오히려 이해를 어렵게 만들었습니다. React는 이 압력을 받아 화면 구조도 자바스크립트 안에서 같이 다루는 쪽을 택했고, JSX가 그 표현 수단이 됐습니다.

컴포넌트 함수가 실행되면 JSX는 React 엘리먼트 트리를 기술하는 값으로 평가됩니다. 태그처럼 보이는 부분은 어떤 요소를 만들지 설명하고, 중괄호 안의 표현식은 그 자리에 들어갈 값을 계산합니다. 이후 React는 이 결과를 바탕으로 어떤 UI가 보여야 하는지 판단하고 실제 화면 반영으로 넘깁니다.

JSX와 컴포넌트는 자주 함께 등장하지만 같은 개념은 아닙니다. JSX는 UI를 적는 문법이고, 컴포넌트는 그 JSX를 반환하는 재사용 가능한 단위입니다. 즉 JSX는 표현 방식이고 컴포넌트는 설계 단위입니다.

실무에서는 상태나 props에 따라 화면 구조가 바뀌는 거의 모든 React 코드가 JSX 위에서 작성됩니다. 다만 JSX 안에 조건과 계산을 과하게 밀어 넣으면 읽기 어려워지므로, 반복되는 구조는 작은 컴포넌트로 빼고 복잡한 계산은 렌더링 직전에 정리하는 편이 낫습니다.