Component

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

React에서는 화면을 하나의 큰 덩어리로 작성하는 대신, 버튼, 카드, 헤더, 입력창처럼 작은 단위의 컴포넌트로 나누어 개발한다. 이렇게 나눈 컴포넌트는 여러 화면에서 재사용할 수 있고, 수정이나 유지보수도 쉬워진다.

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

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

01. 컴포넌트 분리 기준

컴포넌트를 무조건 작게 나누는 것이 좋은 것은 아니다.
재사용성, 역할, 가독성 등을 기준으로 적절하게 분리하는 것이 중요하다.

• 재사용성: 반복적으로 사용되는 공통 UI는 컴포넌트로 분리한다.
• 단일 책임 원칙: 하나의 컴포넌트는 하나의 역할에 집중하는 것이 좋다.
• 가독성: 하나의 컴포넌트가 너무 길어지거나 JSX 구조가 복잡해지면, 작은 컴포넌트로 나눌 수 있다.
  컴포넌트를 분리하면 코드의 구조가 명확해지고, 각 부분이 어떤 역할을 하는지 이해하기 쉬워진다.
• 관심사의 분리: 데이터 처리, 이벤트 처리, UI 렌더링, 스타일링이 한 컴포넌트에 과하게 섞이지 않도록 분리한다.
• 의도 기반 분리: 컴포넌트는 화면상의 위치보다 무엇을 하는가를 기준으로 나누는 것이 좋다.

02. 컴포넌트 종류

React 컴포넌트는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있다.
현재 React에서는 함수형 컴포넌트와 Hook을 사용하는 방식이 권장된다.

2-1. 함수형 컴포넌트

함수형 컴포넌트는 JavaScript 함수 형태로 작성하는 컴포넌트이다.

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

또는 화살표 함수로도 작성할 수 있다.

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

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

• 문법이 간단하고 코드가 직관적이다.
• Hook을 사용해 상태 관리와 생명주기 관련 로직을 처리할 수 있다.
• 클래스형 컴포넌트보다 코드 구조가 간결하다.
• 현재 React 생태계에서 가장 많이 사용되는 방식이다.

2-2. 클래스형 컴포넌트

클래스형 컴포넌트는 ES6의 class 문법을 사용해 작성하는 컴포넌트이다.
과거에는 상태 관리나 생명주기 메서드를 사용하기 위해 클래스형 컴포넌트를 많이 사용했지만, 현재는 함수형 컴포넌트와 Hook을 사용하는 방식이 일반적이다.

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

Class는 객체를 만들기 위한 틀

• 🪹 붕빵틀 → 클래스(Class): 객체를 만들기 위한 설계도
• 🥚 붕어빵 → 인스턴스(Instance): 클래스를 기반으로 생성된 객체

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

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

const person1 = new Person("짱구", 10);

person1.greet(); // 안녕하세요, 저는 짱구입니다.

클래스는 상속을 통해 기존 클래스의 속성과 메서드를 물려받을 수도 있다.

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} 공부 중`);
  }
}

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

student1.greet();
student1.study();