[React문법2]React 컴포넌트의 이해

React 컴포넌트의 기본 개념과 구조

 

1. 컴포넌트란 무엇인가?

• React는 UI를 구성하는 기본 단위로 "컴포넌트(Component)"를 사용하며, 여러 개의 컴포넌트가 조합되어 애플리케이션이 구성됩니다. 
• 컴포넌트는 재사용 가능한 독립적인 코드 블록이며, HTML, CSS, JavaScript 로직을 하나의 단위로 묶어 관리할 수 있습니다.

 

React 애플리케이션은 기본적으로 여러 개의 컴포넌트가 조합되어 하나의 화면을 만드는 구조로 되어 있다. 다음 그림은 각 기능별로 하나 하나의 컴포넌트를 구성함을 표현하였습니다. 이렇게 조각으로 나눠서 개발된 컴포넌트들을 필요한 조각들을 조합하여 화면을 구성하며, 하나의 컴포넌트는 필요한 여러 화면에서 재사용이 가능합니다.

조각 조각 나눠지고 필요한 부분만 조립할 수 있는 컴포넌트들

📌 컴포넌트의 특징

• 재사용 가능 → 같은 컴포넌트를 여러 번 사용 가능
• 독립적 → 한 컴포넌트가 다른 컴포넌트에 영향을 주지 않음
• 계층 구조 → 부모-자식 관계를 통해 구성 가능

---

2. React 컴포넌트의 종류

React에서는 컴포넌트를 두 가지 방식으로 만들 수 있다.

1. 함수형 컴포넌트 (Functional Component)
2. 클래스형 컴포넌트 (Class Component) (최근에는 거의 사용되지 않음)

이번 글에서는 함수형 컴포넌트와 클래스형 컴포넌트의 코드 형식을 비교하고 세부적인 기능들은 또 다시 작성되는 문서에서 학습할 수 있습니다.

1️⃣ 함수형 컴포넌트 (Functional Component)

React 16.8 이후로 함수형 컴포넌트가 주로 사용된다. useState, useEffect 같은 Hooks를 활용할 수 있어 가볍고 직관적인 코드 작성이 가능하다.

import React from "react";

function Greeting() {
  return <h1>안녕하세요! 저는 함수형 컴포넌트입니다. 👋</h1>;
}

export default Greeting;

 

probs로 전달 받아 표현

import React from 'react';

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

export default Greeting;

 

ES6 구조 분해 할당 사용

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

 

위처럼 props 객체에서 name만 바로 받아올 수도 있습니다.

구체적으로 probs의 개념들은 아직 이해하지 못하지만 함수의 구조를 이루고 있으며, 함수 내부에 웹 페이지를 구성하는 html 태그가 간단하게 작성된 것을 볼 수 있습니다. 

 

✅ 함수형 컴포넌트 특징

• class 키워드 없이 function을 사용하여 생성
• return을 통해 JSX 반환
• React Hooks를 사용 가능 (useState, useEffect 등)

 

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

React Hooks가 등장하기 전에는 클래스형 컴포넌트가 일반적이었다. 지금도 일부 프로젝트에서는 사용된다.

import React, { Component } from "react";

class Greeting extends Component {
  render() {
    return <h1>안녕하세요! 저는 클래스형 컴포넌트입니다. 👋</h1>;
  }
}

export default Greeting;

 

probs로 전달 받아 표현

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Greeting;

 

✅ 클래스형 컴포넌트 특징

• class 키워드를 사용하여 생성
• render() 메서드에서 JSX 반환
• this.state 및 this.setState()를 사용하여 상태 관리

---

3. 컴포넌트의 기본 구조

컴포넌트는 다음과 같은 요소로 구성된다.

📌 1️⃣ JSX (JavaScript XML)

React에서는 HTML과 유사한 JSX 문법을 사용하여 UI를 정의한다.

function MyComponent() {
  return <h2>이것은 JSX를 사용한 컴포넌트입니다!</h2>;
}

📌 2️⃣ Props (Properties)

부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때 사용한다.

function User(props) {
  return <h2>안녕하세요, {props.name}님!</h2>;
}

function App() {
  return <User name="홍길동" />;
}

📌 3️⃣ State (상태 관리)

컴포넌트 내부에서 변경 가능한 데이터를 관리한다.

import React, { useState } from "react";

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

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1 증가</button>
    </div>
  );
}

---

4. 컴포넌트 사용 방법

React에서는 컴포넌트를 HTML 태그처럼 사용할 수 있다.

import React from "react";
import Greeting from "./Greeting";

function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
    </div>
  );
}

export default App;

✅ Greeting 컴포넌트를 여러 번 재사용할 수 있다.

5. 컴포넌트 스타일링 방법

1️⃣ CSS 파일로 스타일 적용

/* styles.css */
.title {
  color: blue;
  font-size: 20px;
}

import "./styles.css";

function StyledComponent() {
  return <h1 className="title">스타일 적용된 컴포넌트</h1>;
}

2️⃣ 인라인 스타일 적용

function InlineStyledComponent() {
  const style = { color: "red", fontWeight: "bold" };
  return <h1 style={style}>인라인 스타일 적용</h1>;
}

3️⃣ Styled-Components 사용

import styled from "styled-components";

const Title = styled.h1`
  color: green;
  font-size: 24px;
`;

function StyledComponent() {
  return <Title>Styled-Components 적용</Title>;
}

6. 정리 ✨

• React에서는 컴포넌트를 사용하여 UI를 구성한다.
• 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트가 있다.
• JSX 문법을 사용하여 UI를 선언적으로 작성할 수 있다.
• Props는 부모 → 자식으로 데이터를 전달하는 방법이다.
• State는 컴포넌트 내부에서 데이터를 관리하는 방법이다.
• 컴포넌트 스타일링은 CSS 파일, 인라인 스타일, Styled-Components 등을 활용할 수 있다.

React 컴포넌트를 이해하면 앞으로 더 복잡한 UI를 쉽게 구현할 수 있다. 🚀