[React] 초급 개념2 - 컴포넌트 개념 및 구조

리액트(React)의 핵심 개념 중 하나는 컴포넌트(Component) 입니다. 컴포넌트는 UI를 독립적이고 재사용 가능한 단위로 나누어 관리할 수 있도록 도와줍니다.

---

 

 

🔸 1. 컴포넌트란?

컴포넌트는 리액트의 기본 단위로, 각각의 컴포넌트는 독립적으로 동작하며, 다른 컴포넌트와 조합하여 UI를 구성합니다.

 

✅ 컴포넌트의 특징

• 재사용 가능: 한 번 만든 컴포넌트는 여러 곳에서 재사용 가능
• 독립적: 각 컴포넌트는 자체적인 상태(state)와 속성(props)을 가짐
• 컴포넌트 트리: 여러 컴포넌트가 계층적으로 구성됨

---

 

 

🔸 2. 함수형 vs 클래스형 컴포넌트

리액트에서 컴포넌트는 함수형 컴포넌트(Function Component) 와 클래스형 컴포넌트(Class Component) 로 나뉩니다.

 

✅ 함수형 컴포넌트 (권장)

function Hello() {
  return <h1>Hello, React!</h1>;
}

 

📌 설명:

• function 키워드를 사용하여 선언
• return 문 안에 JSX를 포함
• state 없이 간단한 UI를 표현할 때 적합

 

✅ 클래스형 컴포넌트 (이전 방식)

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

 

📌 설명:

• class 키워드를 사용하여 선언
• render() 메서드를 사용하여 JSX 반환
• state 및 라이프사이클 메서드를 사용할 수 있음

🚀 함수형 컴포넌트 + Hooks (useState, useEffect) 가 현재 가장 많이 사용됨

---

 

 

🔸 3. props와 state

컴포넌트에서 데이터는 props와 state를 통해 전달되고 관리됩니다.

 

✅ props (속성): 부모 → 자식 데이터 전달

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

 

📌 설명:

• props는 읽기 전용(immutable)이며, 부모 컴포넌트에서 자식 컴포넌트로 전달됨

 

✅ state (상태): 컴포넌트 내부에서 관리되는 데이터

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

 

📌 설명:

• useState를 사용하여 상태를 관리할 수 있음
• setCount 함수를 호출하면 count 값이 업데이트됨

---

 

 

🔸 4. 컴포넌트 구조 및 계층

리액트 애플리케이션은 여러 개의 컴포넌트로 구성되며, 컴포넌트 간 계층 구조를 가집니다.

 

✅ 예제: 컴포넌트 트리 구조

function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

 

📌 설명:

• App 컴포넌트가 Header, MainContent, Footer 컴포넌트를 포함
• 각각의 컴포넌트는 독립적으로 동작하면서 하나의 UI를 구성

---

 

 

🔸 5. 컴포넌트의 장점

✅ 재사용성: 동일한 UI 로직을 여러 곳에서 활용 가능 ✅ 유지보수 용이: 각 컴포넌트가 독립적으로 관리되므로 코드 유지보수 용이 ✅ 가독성 향상: 컴포넌트를 나누면 코드가 더 직관적으로 이해 가능

---