JSX(JavaScript XML)는 React 애플리케이션에서 UI를 작성하기 위한 JavaScript의 확장 구문입니다. JSX를 사용하면 HTML과 유사한 구문으로 UI 컴포넌트를 작성할 수 있습니다. JSX에서는 컴포넌트에 속성(props)을 전달하여 동적으로 UI를 구성할 수 있습니다.

속성 전달하기

JSX에서 컴포넌트에 속성을 전달할 때는 HTML 요소의 속성과 유사한 방식을 사용합니다. 속성은 컴포넌트를 호출할 때 태그 내에 속성 이름과 값을 함께 정의합니다.

예를 들어, 다음은 HelloWorld 컴포넌트에 name 속성을 전달하는 예시입니다.

<HelloWorld name="Alice" />

컴포넌트에서 속성 사용하기

전달된 속성은 컴포넌트 내부에서 props 객체를 통해 접근할 수 있습니다. props 객체를 통해 속성 값에 접근하여 UI를 렌더링하거나 다른 로직에 활용할 수 있습니다.

다음은 HelloWorld 컴포넌트에서 name 속성을 사용하는 예시입니다.

function HelloWorld(props) {
  return <div>Hello, {props.name}!</div>;
}

정리

JSX를 사용하여 React 애플리케이션을 개발할 때 속성을 효과적으로 활용할 수 있습니다. 이를 통해 동적으로 변하는 데이터나 상황에 맞게 UI를 업데이트하거나, 컴포넌트 간에 데이터를 전달할 수 있습니다.

자세한 내용은 React 공식 문서를 참고하시기 바랍니다.