JSX 완전 정복: 표현식과 조건부 렌더링 패턴
JSX 문법의 기본: HTML과 자바스크립트의 강력한 결합
JSX는 자바스크립트의 확장 문법으로, UI를 설계할 때 브라우저가 직접 읽지 못하는 HTML 형태의 코드를 자바스크립트 객체로 변환해 줍니다. 마치 하이브리드 자동차가 가솔린과 전기의 장점을 결합한 것처럼, JSX는 마크업 언어의 시각적 직관성과 프로그래밍 언어의 논리적 유연성을 동시에 제공합니다.
가장 핵심이 되는 규칙은 중괄호(curly braces)입니다. JSX 안에서 자바스크립트 변수나 표현식을 사용하고 싶다면 단순히 { expression } 형태로 감싸주면 됩니다. 이 중괄호 안에는 변수명뿐만 아니라 함수 호출, 연산, 심지어 배열의 순회까지 자바스크립트가 처리할 수 있는 거의 모든 유효한 표현식이 들어갈 수 있습니다.
JSX 조건부 렌더링: 상황에 따라 UI를 제어하는 4가지 패턴
화면에 특정 요소를 보여주거나 숨겨야 하는 상황은 웹 앱 개발에서 매우 빈번하게 일어납니다. 리액트에서는 if 문 대신 JSX 조건부 렌더링 패턴을 활용해 선언적으로 화면을 제어합니다. 가장 널리 쓰이는 패턴은 삼항 연산자와 논리곱 연산자(&&)입니다.
첫 번째로, 삼항 연산자(condition ? true : false)는 참과 거짓일 때 서로 다른 UI를 보여줘야 할 때 적합합니다. 로그인 상태에 따라 '로그아웃' 버튼과 '로그인' 버튼을 교체해 보여주는 상황이 대표적인 예시입니다.
두 번째인 논리곱 연산자(condition && expression)는 조건이 참일 때만 UI를 그리고, 거짓일 때는 아무것도 렌더링하지 않을 때 극도의 효율성을 발휘합니다. 예를 들어 새 알림이 있을 때만 뱃지 아이콘을 보여주는 화면에서 유용하게 쓰입니다.
세 번째로, 조건이 복잡해지면 JSX 내부가 지저분해지기 쉽습니다. 이럴 때는 리액트 컴포넌트 내부에서 즉시 실행 함수(IIFE)를 정의하거나 별도의 도우미 함수를 만들어 switch 문이나 if 문으로 처리한 뒤 결과를 반환하는 패턴을 사용하는 것이 가독성에 좋습니다.
JSX 리스트와 map 함수: 데이터 배열을 화면으로 변환하기
블로그 포스트 목록이나 쇼핑몰 상품 리스트처럼 반복되는 데이터를 렌더링할 때 사용하는 것이 바로 JSX 리스트 패턴입니다. 자바스크립트 배열의 내장 함수인 map()을 사용하여 데이터 배열을 JSX 엘리먼트 배열로 가공해 화면에 뿌려줍니다.
이때 반드시 기억해야 할 중요한 규칙이 바로 key 속성입니다. 리액트는 화면의 변경된 부분만 빠르게 업데이트하는 가상 돔(Virtual DOM)을 활용하는데, 이때 어떤 아이템이 추가되거나 삭제되었는지 식별하는 고유한 이름표가 필요합니다.
만약 고유한 key 값을 부여하지 않거나 단순한 배열의 인덱스(index)를 사용하면, 데이터가 정렬되거나 중간에 삽입될 때 성능이 떨어지거나 렌더링 에러가 발생할 수 있습니다. 따라서 백엔드 데이터베이스의 고유 ID처럼 변하지 않는 고유값을 키로 지정해야 합니다.
실무에서 놓치기 쉬운 JSX 문법 주의점
JSX는 겉모습이 HTML과 유사하기 때문에 처음에 실수를 저지르기 쉽습니다. 가장 대표적인 실수가 바로 모든 엘리먼트가 단 하나의 부모 태그로 감싸져 있어야 한다는 점입니다. 여러 개의 태그를 나란히 나열하면 에러가 발생하므로, 이때는 불필요한 DOM 생성을 막아주는 빈 태그 형태의 <Fragment>(<></>)를 사용해야 합니다.
또한, 자바스크립트의 예약어와 충돌하는 것을 방지하기 위해 class 대신 className을 사용해야 하며, 스타일을 지정할 때는 문자열이 아닌 style={{ color: 'blue', fontSize: '14px' }}처럼 카멜 케이스(camelCase) 객체 형태로 전달해야 하는 점도 놓쳐서는 안 될 필수 규칙입니다.
JSX 문법은 리액트 생태계로 들어가는 가장 첫 번째 관문이자 가장 강력한 도구입니다. 복잡해 보이는 조건부 렌더링과 리스트 렌더링도 기본 원리를 차근차근 짚어보면 결국 자바스크립트의 기본적인 논리 연산과 배열 메서드를 우아하게 가공한 것에 불과하다는 점을 알 수 있습니다. 이 가이드를 통해 습득한 패턴들을 실제 프로젝트에 하나씩 적용해 보면서 더 깔끔하고 가독성 좋은 코드를 작성해 보시기 바랍니다.