1. 컴포넌트 개요

• 컴포넌트(Component)는 화면 구성 요소를 독립적인 형태로 구성한 모듈입니다. React 애플리케이션은 여러 개의 컴포넌트로 구성되어 전체 화면을 렌더링합니다.
• 컴포넌트 종류:
  • 클래스형 컴포넌트와 함수형 컴포넌트가 있습니다. 최신 React에서는 함수형 컴포넌트를 주로 사용하며, 함수형 컴포넌트는 React 훅(Hook)을 사용하여 상태 관리 및 생명주기를 처리합니다.

2. 프로퍼티와 상태

• props (속성): 상위 컴포넌트에서 하위 컴포넌트로 전달되는 데이터로, 컴포넌트 내에서 읽기 전용입니다. 부모 컴포넌트가 자식 컴포넌트에 값을 전달하는 방법입니다.
• state (상태): 컴포넌트 내부에서 관리되는 데이터로, 사용자의 입력이나 이벤트에 따라 변경될 수 있습니다. setState 메서드를 사용하여 상태를 업데이트합니다.
• ref: DOM 요소나 React 컴포넌트를 직접 참조할 때 사용됩니다. ref는 컴포넌트 내부에서 DOM에 접근할 때 유용하게 사용됩니다.

3. 컴포넌트 생명주기

• 컴포넌트 생명주기(Lifecycle): 컴포넌트가 생성되고, 업데이트되며, 제거되는 일련의 과정을 말합니다.
  • 클래스형 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 메서드를 사용하여 컴포넌트의 생명주기를 다룰 수 있습니다.
  • 함수형 컴포넌트에서는 useEffect 훅을 사용하여 생명주기 메서드를 대체할 수 있습니다.

src/App.jsx (컴포넌트 출력 통합)

import "./App.css";

// 예제 컴포넌트 import
import ClassTypeComponent from "./components/ClassTypeComponent";
import FunctionalComponent from "./components/FunctionalComponent";
import ParentComponent from "./components/ParentComponent";
import PropsComponent from "./components/PropsComponent";
import ContentComponent from "./components/ContentComponent";
import StateComponent from "./components/StateComponent";
import LifeCycleComponent from "./components/LifeCycleComponent";

// 메인 App 컴포넌트
function App() {
  return (
    <>
      <h3>3장 리액트 컴포넌트</h3>

      {/* 클래스형 컴포넌트 */}
      <ClassTypeComponent />

      {/* 함수형 컴포넌트 */}
      <FunctionalComponent />

      {/* 중첩 컴포넌트 */}
      <ParentComponent />

      {/* Props 컴포넌트 */}
      <PropsComponent
        title="프로퍼티 컴포넌트"
        message="속성을 갖는 컴포넌트"
      />

      {/* 내용(children)을 갖는 컴포넌트 */}
      <ContentComponent>
        <h5>내용제목입니다.</h5>
        <p>내용을 갖는 컴포넌트 입니다.</p>
      </ContentComponent>

      {/* State 컴포넌트 */}
      <StateComponent />

      {/* 생명주기 컴포넌트 */}
      <LifeCycleComponent />
    </>
  );
}

export default App;

설명:

• App 컴포넌트: 여러 개의 예제 컴포넌트를 return 문을 통해 렌더링합니다.
  • 각 컴포넌트는 독립적으로 기능을 수행하며, 이 예제에서는 클래스형 컴포넌트, 함수형 컴포넌트, props, state, 생명주기를 모두 다루고 있습니다.

폴더 구조

src/
├── App.jsx                ← 이론 + 출력 통합
├── App.css
└── components/
    ├── ClassTypeComponent.jsx
    ├── FunctionalComponent.jsx
    ├── ParentComponent.jsx
    ├── ChildComponent.jsx
    ├── PropsComponent.jsx
    ├── ContentComponent.jsx
    ├── StateComponent.jsx
    └── LifeCycleComponent.jsx

설명:

• components 폴더 안에 각 컴포넌트를 별도로 파일로 분리하여 관리합니다. 이렇게 함으로써 각 컴포넌트가 독립적인 모듈처럼 관리되고 재사용성이 높아집니다.