[React] JSX 소개 및 사용법

JSX는 JavaScript를 확장한 문법으로, React에서 UI를 구조화하는 데 사용됩니다. HTML과 유사한 문법을 가지고 있지만, 브라우저가 직접 이해할 수 없기 때문에, Babel과 같은 트랜스파일러를 통해 일반 JavaScript 코드로 변환되어야 합니다. JSX의 도입은 개발자가 UI를 보다 직관적으로 설계할 수 있게 하여, 생산성과 가독성을 크게 향상시킵니다.

기본 사용법

JSX를 사용하면, 컴포넌트 내부에 HTML 태그를 직접 쓸 수 있습니다. 이는 React 엘리먼트를 생성하는 표준 JavaScript 함수 호출보다 훨씬 읽기 쉬운 코드를 가능하게 합니다.

const element = <h1>Hello, World!</h1>;

위 코드는 h1 태그에 "Hello, World!"라는 텍스트를 포함하는 JSX 표현식입니다. React는 이를 실제 DOM 엘리먼트로 변환합니다.

변수와 표현식 사용하기

JSX 안에서는 중괄호 {}를 사용하여 JavaScript 표현식을 삽입할 수 있습니다. 이를 통해 동적인 데이터를 UI에 통합할 수 있습니다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

조건부 렌더링

JSX는 JavaScript 표현식을 포함할 수 있기 때문에, 조건부 연산자(삼항 연산자)와 같은 JavaScript 구문을 사용하여 조건에 따라 다른 요소를 렌더링할 수 있습니다.

const isLoggedIn = true;
const element = <h1>{isLoggedIn ? 'Welcome back!' : 'Please sign up.'}</h1>;

스타일링과 클래스명 설정

JSX에서는 style 속성과 className 속성을 사용하여 엘리먼트에 스타일과 CSS 클래스를 적용할 수 있습니다. style 속성에는 JavaScript 객체가 전달되며, CSS 속성명은 카멜 케이스로 작성됩니다.

const element = <div style={{backgroundColor: 'blue', color: 'white'}}>Hello, World!</div>;

컴포넌트와 함께 사용하기

JSX는 사용자 정의 컴포넌트를 정의하고 사용할 때도 매우 유용합니다. 컴포넌트 이름은 항상 대문자로 시작해야 합니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;

결론

JSX는 React 개발에서 중요한 역할을 합니다. HTML과 유사한 문법으로 인해 웹 개발자들이 쉽게 접근할 수 있으며, JavaScript의 힘을 활용하여 동적인 UI를 효율적으로 구성할 수 있게 해줍니다. 이 가이드를 통해 JSX의 기본 사용법과 그 장점을 이해하게 되었길 바랍니다. 다음 단계에서는 React의 상태 관리와 라이프사이클에 대해 더 심도 있게 다룰 예정입니다.