1. 컴포넌트 (Components)

1.1 컴포넌트의 정의

• React 컴포넌트란?
  • UI를 구성하는 최소 단위로, 재사용 가능하며 독립적인 코드 블록입니다.
  • 각 컴포넌트는 자체적인 상태와 로직을 가지고 있으며, 이를 이용해 복잡한 사용자 인터페이스를 간단하게 분해하여 관리할 수 있습니다.

1.2 왜 컴포넌트를 사용하는가?

• 모듈화와 재사용성:
  • 기존 MVC 패턴에서 뷰와 로직이 복잡하게 얽혀있어 재사용과 유지보수가 어려운 문제를 해결합니다.
  • 각 컴포넌트를 독립적으로 개발하면, 여러 페이지나 프로젝트에서 동일한 UI 요소를 재활용할 수 있습니다.
• 독립적 상태 관리:
  • 각 컴포넌트는 고유한 상태를 관리하므로, 상태가 변경될 때 해당 컴포넌트만 업데이트되며 전체 애플리케이션에 영향을 주지 않습니다.

1.3 예제 코드: 컴포넌트 분리

// SearchInput.tsx
import React from "react";

const SearchInput = ({ searchText, onSearchChange }) => (
  <input
    type="text"
    placeholder="검색..."
    value={searchText}
    onChange={onSearchChange}
  />
);

export default SearchInput;

// VideoList.tsx
import React from "react";

const VideoList = ({ videos }) => (
  <ul>
    {videos.map((video) => (
      <li key={video.id}>{video.title}</li>
    ))}
  </ul>
);

export default VideoList;

// App.tsx (메인 컴포넌트)
import React, { useState } from "react";
import SearchInput from "./components/SearchInput";
import VideoList from "./components/VideoList";

const App = () => {
  const [searchText, setSearchText] = useState("");
  const [videos, setVideos] = useState([]);

  return (
    <div>
      <h1>Video App</h1>
      <SearchInput searchText={searchText} onSearchChange={(e) => setSearchText(e.target.value)} />
      <VideoList videos={videos} />
    </div>
  );
};

export default App;

• 코드 설명

• 해설:

  위 예제에서는 SearchInput 컴포넌트와 VideoList 컴포넌트로 UI를 분리하여, 각각의 역할에 맞는 코드를 독립적으로 관리할 수 있게 함으로써 재사용성과 유지보수를 높였습니다.

1.4 공식 문서

• https://react.dev/learn/your-first-component

2. JSX (JavaScript XML)

2.1 JSX의 정의 및 역할

• 정의:
  • JSX는 JavaScript의 확장 문법으로, XML과 유사한 구문을 사용하여 UI를 선언적으로 표현할 수 있게 해줍니다.
  • JSX 코드는 Babel과 같은 트랜스파일러를 통해 일반 JavaScript 코드(React.createElement 호출)로 변환됩니다.