JSX는 React 애플리케이션을 개발하는 데 중요한 역할을 합니다. JSX를 사용하면 HTML과 유사한 구문으로 React 컴포넌트를 작성할 수 있습니다. 이때 컴포넌트의 상태(state)와 속성(props)를 제어하는 것이 중요합니다.

프롭스(Props)란?

프롭스는 React 컴포넌트에 전달되는 읽기 전용 데이터입니다. 다른 컴포넌트로부터 데이터를 전달할 때 사용됩니다.

아래는 JSX에서 프롭스를 사용하는 예시입니다.

import React from 'react';

type GreetingProps = {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

위의 예시에서 Greeting 컴포넌트는 name 프롭을 받아와서 사용합니다.

스테이트(State)란?

스테이트는 컴포넌트 내부에서 관리되는 mutable한 데이터입니다. 상태는 컴포넌트가 다시 렌더링될 때 변경될 수 있습니다.

아래는 JSX에서 스테이트를 사용하는 예시입니다.

import React, { useState } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

위의 예시에서 Counter 컴포넌트는 count 상태를 가지고 있으며, setCount 함수를 사용하여 상태를 갱신합니다.

결론

JSX에서 프롭스와 스테이트를 사용하는 방법에 대해 간단히 알아보았습니다. 프롭스는 읽기 전용 데이터로, 다른 컴포넌트로부터 전달되며, 스테이트는 컴포넌트 내부에서 관리되는 mutable한 데이터입니다. 이 두 가지를 잘 활용하여 React 애플리케이션을 개발하는 데 도움이 될 것입니다.