[LG CNS AM Inspire Camp] 9. React 컴포넌트와 상태 관리

1. React 컴포넌트 개요

React는 UI를 만들기 위한 컴포넌트 기반의 JavaScript 라이브러리입니다. 컴포넌트를 활용하면 UI를 작은 단위로 나누어 재사용 가능하며, 유지보수가 쉬운 구조를 만들 수 있습니다.

1.1. 컴포넌트의 종류

React의 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트로 나뉩니다.

1) 클래스형 컴포넌트

클래스형 컴포넌트는 Component 클래스를 확장하여 생성하며, render() 메서드가 반드시 필요합니다.

import { Component } from "react";

class MyComponentClass extends Component {
  render() {
    return (
      <>
        <h1>이름은 홍길동입니다.</h1>
        <h2>나이는 23살입니다.</h2>
      </>
    );
  }
}

export default MyComponentClass;

2) 함수형 컴포넌트

함수형 컴포넌트는 단순한 JavaScript 함수로 정의되며, return 문에서 JSX를 반환합니다.

function MyComponentFunction() {
  return (
    <>
      <h1>이름은 홍길동입니다.</h1>
      <h2>나이는 23살입니다.</h2>
    </>
  );
}

export default MyComponentFunction;

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

항목클래스형 컴포넌트함수형 컴포넌트

상태 관리	this.state 사용	useState Hook 사용
생명주기 메서드	componentDidMount 등 제공	useEffect Hook 사용
코드 간결성	상대적으로 복잡	간결한 코드 작성 가능

2. Props (Properties)

2.1. Props 개념

props는 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달하는 데 사용됩니다. props 값은 읽기 전용으로, 컴포넌트 내부에서 변경할 수 없습니다.

2.2. Props 활용 예제

부모 컴포넌트에서 Props 전달

import MyComponentFunction from "./MyComponentFunction";

function App() {
  return (
    <>
      <MyComponentFunction name="고길동" age={40} />
    </>
  );
}

export default App;

자식 컴포넌트에서 Props 사용

function MyComponentFunction({ name, age }) {
  return (
    <>
      <h1>이름은 {name}입니다.</h1>
      <h2>나이는 {age}살입니다.</h2>
    </>
  );
}

export default MyComponentFunction;

2.3. Props 기본값 설정

Props가 전달되지 않았을 때 기본값을 설정할 수 있습니다.

function MyComponentFunction({ name = "아무개", age = 0 }) {
  return (
    <>
      <h1>이름은 {name}입니다.</h1>
      <h2>나이는 {age}살입니다.</h2>
    </>
  );
}

export default MyComponentFunction;

3. State (상태 관리)

3.1. State 개념

state는 컴포넌트 내부에서 관리되는 데이터로, 값이 변경될 경우 컴포넌트가 다시 렌더링됩니다.

3.2. 클래스형 컴포넌트에서 State 사용

클래스형 컴포넌트에서는 this.state를 사용하여 상태를 선언하고, setState()를 사용하여 값을 변경합니다.

import { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { number: 0 };
  }

  render() {
    return (
      <>
        <h1>{this.state.number}</h1>
        <button onClick={() => this.setState({ number: this.state.number + 1 })}>
          증가
        </button>
      </>
    );
  }
}

export default Counter;

3.3. 함수형 컴포넌트에서 State 사용 (useState)

함수형 컴포넌트에서는 useState Hook을 사용하여 상태를 관리합니다.

import { useState } from "react";

function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => setNumber(number + 1)}>증가</button>
    </>
  );
}

export default Counter;

3.4. State 변경 방식의 차이

• 클래스형: this.setState()를 사용하여 변경
• 함수형: useState의 setter 함수를 사용하여 변경

3.5. State를 이용한 TrafficLight 예제

import { useState } from "react";

function TrafficLight() {
  const [color, setColor] = useState("red");
  
  return (
    <>
      <div style={{ width: 100, height: 100, borderRadius: 50, backgroundColor: color }} />
      <button onClick={() => setColor("green")}>초록</button>
      <button onClick={() => setColor("yellow")}>노랑</button>
      <button onClick={() => setColor("red")}>빨강</button>
    </>
  );
}

export default TrafficLight;

4. 마무리

이번 강의를 통해 React의 컴포넌트 개념, Props, State의 개념과 활용 방법을 학습하였습니다. 특히 클래스형과 함수형 컴포넌트의 차이점, Props를 이용한 데이터 전달, State를 활용한 동적 UI 업데이트를 실습하면서 React의 핵심 개념을 익힐 수 있었습니다.

 

---

이 글은 LG CNS AM Inspire Camp 1기 진행 중 Obsidian에 정리해뒀던 글을 블로그에 옮긴 글입니다.