React / 컴포넌트

CDD(Component Driven Development)

• 컴포넌트 기반 개발
• 화면을 독립적이고 재사용 가능한 컴포넌트로 구성하여 개발하는 방법론
• Class 컴포넌트, 함수형 컴포넌트(많이 권장) 두 종류가 있음

 

Class 컴포넌트

 

클래스 문법 ⬇️

클래스(Class)는 객체를 생성하는 템플릿 역할로, 붕어빵 틀에 많이 비유되고 있다... (객체 - 붕어빵, 클래스 - 붕어빵 틀)

 

1) 기본 구조

class Person {
  constructor(name, age) { // 생성자 (객체가 생성될 때 실행됨)
    this.name = name;
    this.age = age;
  }

  sayHello() { // 메서드 (객체가 사용할 함수)
    console.log(`안녕하세요! 저는 ${this.name}이고, ${this.age}살입니다.`);
  }
}

// 클래스 사용 (인스턴스 생성)
const person1 = new Person("하연", 24);
person1.sayHello(); // "안녕하세요! 저는 하연이고, 24살입니다."

 

- Person 클래스 정의

- 생성자(constructor)로 객체의 초기 상태를 설정

- 메서드로 객체의 기능 정의

- new로 새 인스턴스 생성

 

 

2) 상속

extends 키워드로 클래스를 확장해 재사용이 가능하게 만들 수 있다.

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

  introduce() {
    console.log(`저는 ${this.grade}학년입니다.`);
  }
}

// 인스턴스 생성
const student1 = new Student("민수", 16, 10);
student1.sayHello(); // "안녕하세요! 저는 민수이고, 16살입니다."
student1.introduce(); // "저는 10학년입니다."

 

 

3) 정적 메서드

객체가 아닌 클래스 자체에서 직접 호출하는 메서드로 static 키워드를 사용해 인스턴스를 생성하지 않아도 호출이 가능하다.

 

static은 계산 / 변환 메서드나 데이터베이스 공통 작업(연결, 조회, 수정, 삭제 등..),

같은 초기값을 가진 객체를 생성할 때(예를 들어, 익명사이트에서 로그인을 안한 상태로 대화창에 들어왔을 때 공통으로 닉네임이 Guest로 설정될 때)

하나의 인스턴스만 유지해야 할 때 (프로그램 전역에서 공유하는 설정 정보를 저장할 때, 앱 전체에서 같은 로그 기록 객체를 공유할 때(같은 로그 배열을 공유함), db연결을 매번 새로 하는 것 없이 하나의 연결을 계속 유지할 때(메모리 절약 및 불필요한 중복 연결을 방지함)

class MathUtils {
  static add(x, y) {
    return x + y;
  }
}

console.log(MathUtils.add(5, 3)); // 8

 

 

작성 - 챗지피티.... 고마워요

 

클래스형 컴포넌트는 다음과 같이 생성할 수 있다.

(Vite로 리액트 프로젝트를 생성했다)

 

src/App.jsx

import { Component } from "react";
import "./App.css";

class App extends Component {
  render(){
    return <div>클래스형 컴포넌트</div>
  }
}

export default App;

 

 

 

함수형 컴포넌트

 

요즘 표준으로 사용되는 형식은 함수형 컴포넌트다.

함수형 컴포넌트란 말 그대로 함수처럼 동작하는 컴포넌트로, 클래스형보다 코드가 간결하고 성능이 더 좋으며 직관적이다.

클래스형에서만 가능한 기능도 있지만 이는 React Hooks를 사용하면 함수형 컴포넌트에서도 가능하다. (상태 관리 - useState, 생명주기 - useEffect)

 

src/App.jsx

import { Component } from "react";
import "./App.css";


function App(){
  return <div>함수형 컴포넌트</div>
}

export default App;