React 컴포넌트란?

React 컴포넌트는 React 애플리케이션의 기본 구성 요소예요.
컴포넌트는 화면에 표시할 내용을 정의하는 단위라고 보면 됩니다.
React 컴포넌트를 만드는 방법에는 두 가지가 있습니다:

---

1. 함수형 컴포넌트(Function Component)

• 간단한 JavaScript 함수로 작성합니다.

• JSX(HTML처럼 보이는 코드)를 반환합니다.

• 최신 React에서는 이 방식을 권장하고 사용합니다.

  예제:

  const MyComponent = () => {
      return <h1>Hello, React!</h1>;
  };

2. 클래스형 컴포넌트(Class Component)

• React.Component를 확장한 JavaScript 클래스를 사용합니다.

• render()라는 메서드 안에서 JSX를 반환합니다.

• 과거에 많이 사용되었지만, 최신 React에서는 거의 사용하지 않습니다.

  예제:

  class MyComponent extends React.Component {
      render() {
          return <h1>Hello, React!</h1>;
      }
  }

---

클래스형 컴포넌트: 왜 중요한가?

클래스형 컴포넌트는 React 초창기부터 사용된 방식이에요.
render() 메서드 안에 JSX를 반환해야 한다는 규칙이 있어요.
작성한 코드 예제를 보면 이런 구조입니다:

class App extends React.Component {
    render() {
        return (
            <h1 title="This works!">
                Hi, <span>this</span> is ReactJS!
            </h1>
        );
    }
}

export default App;

이 코드를 분석해 보면:

• class App extends React.Component:
  App이라는 클래스는 React 컴포넌트를 확장한 것입니다.
  즉, React에서 제공하는 기능을 사용할 수 있게 됩니다.
• render() 메서드:
  이 메서드는 React가 컴포넌트를 화면에 렌더링할 때 호출됩니다.
  여기서 반환하는 내용(JSX)이 실제로 브라우저 화면에 표시됩니다.
• JSX 코드:
  <h1> 태그와 그 안의 내용이 반환됩니다.
  React는 이 JSX를 HTML로 변환해서 DOM에 렌더링합니다.

---

최신 React에서는 함수형 컴포넌트를 사용

React는 더 간단하고 성능이 좋은 함수형 컴포넌트를 권장합니다.
이유는 함수형 컴포넌트가:

• 작성하기 쉽고 코드가 더 간결합니다.
• React의 최신 기능인 Hooks를 지원합니다.
• 클래스형 컴포넌트보다 성능이 약간 더 좋습니다.

위 클래스형 컴포넌트 코드를 함수형 컴포넌트로 바꾼다면 이렇게 됩니다:

const App = () => {
    return (
        <h1 title="This works!">
            Hi, <span>this</span> is ReactJS!
        </h1>
    );
};

export default App;

---

JSX 코드 작성 시 주의할 점

JSX를 작성할 때는 몇 가지 규칙을 지켜야 React가 제대로 이해할 수 있어요.

1. JSX 코드는 반드시 반환(return)해야 한다.

   const MyComponent = () => {
       return <h1>Hello, React!</h1>;
   };

2. JSX에 사용되는 컴포넌트 이름은 대문자로 시작해야 한다.
   React는 대문자로 시작하는 컴포넌트를 사용자 정의 컴포넌트로 인식합니다.
   소문자로 시작하면 일반 HTML 태그로 간주합니다.

   const MyComponent = () => {
       return <CustomComponent />;
   };

3. React 컴포넌트는 JSX 또는 React.createElement를 반환해야 한다.
   React 컴포넌트는 HTML-like 코드를 반환해야 합니다. 단순히 객체를 반환하면 컴포넌트로 동작하지 않습니다.

   const InvalidComponent = () => {
       return { message: "This is not valid!" }; // 컴포넌트로 동작하지 않음
   };