🧩 Component

📎 React - Component

컴포넌트란, UI를 구성하는 독립적이고 재사용 가능한 블록이다.

컴포넌트 기반 개발 (Component Driven Development, CDD)

UI를 독립적이고 재사용 가능한 컴포넌트 단위로 나누어 개발하는 방식이다.
각 컴포넌트는 자신의 상태와 로직, 스타일을 포함할 수 있어 구조화된 개발이 가능하다.

컴포넌트 분리 기준

재사용성 (Reusability)

• 반복적으로 사용되는 공통 UI는 컴포넌트로 분리하여 재사용성을 높인다.

단일 책임 원칙 (SRP: Single Responsibility Principle)

• 하나의 컴포넌트는 하나의 역할만 수행하도록 하여 코드의 이해도와 유지보수성을 높인다.

가독성 (Readability)

• 큰 컴포넌트를 작고 독립적인 단위로 나눠 코드의 구조를 더 명확하고 이해하기 쉽게 만든다.

추가적으로 고려할 수 있는 기준,

관심사의 분리 (Separation of Concerns):
데이터 처리, 스타일링, 뷰 로직이 한 컴퍼넌트에 섞이지 않도록 나눈다.

파일 크기와 깊이 제한:
하나의 파일이 너무 길거나 중첩 구조가 깊어질 경우, 컴포넌트 분리 시점을 고려한다.

의도 기반 분리:
화면상의 위치보다는, “무엇을 하는가”를 기준으로 컴포넌트를 나누는 것이 바람직하다.

컴포넌트 종류

React에는 두 종류의 컴포넌트가 있다.

함수형 컴포넌트 권장

function Greeting({ name }) {
  return <h1>안녕하세요, {name}!</h1>;
}

클래스형 컴포넌트

클래스 컴포넌트는 ES6의 class 문법을 활용하여 컴포넌트를 생성한다.

class Greeting extends React.Component {
  render() {
    return <h1>안녕하세요, {this.props.name}!</h1>;
  }
}

Class는 객체를 만들기 위한 틀

• 🪹 붕빵틀: 클래스 (Class)
• 🥚 붕어빵: 객체 (Instance)

기본 클래스 예시

class Person {
  constructor(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
  }
  greet() {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
  }
}

클래스 상속 예시

class Student extends Person {
  constructor(name, age, sex, grade) {
    super(name, age, sex); // 부모(Person)의 생성자 호출
    this.grade = grade;
  }

  // greet 메서드 오버라이딩 (재정의, greet 메서드를 덮어씀)
  greet() {
    console.log(`${this.name}: 태정태세문단세`);
  }
  // Student만의 고유 메서드
  study() {
    console.log(`${this.name}: 공부중인척`);
  }
}

사용 예시

const student1 = new Student("짱구", 10, "남성", 1);

student1.greet(); // 짱구: 태정태세문단세
student1.study(); // 짱구: 공부중인척

컴포넌트 생성 방법

💡 React 공식 가이드

📎 React docs
We recommend defining components as functions instead of classes.

리액트 컴포넌트 만드는 방법은 함수형 컴포넌트와 클래스형 컴포넌트 크게 두 가지가 있다.
공식 문서에서는 함수형 컴포넌트와 Hook을 사용하는 방식을 권장한다.

함수형 컴포넌트를 권장하는 이유

• 작성이 간단하고, 코드가 직관적이다.
• React Hook을 활용하여 상태 관리와 생명주기 처리가 쉬워진다.
• 최적화와 성능 면에서 유리하다.