[React] 리액트 클래스형 컴포넌트 함수형 컴포넌트

클래스형 컴포넌트

리액트 초기에는 클래스형 컴포넌트가 주로 사용됨. 클래스형 컴포넌트는 Component를 상속받아 만들어짐

예제 코드:

import { Component } from "react";

class App extends Component {
  render() {
    return <h1>App</h1>;
  }
}

export default App;

함수형 컴포넌트

함수형 컴포넌트는 함수의 형태로 작성됨. 최근에는 React의 주요 작성 방식으로 자리잡음

예제 코드:

export default function App() {
  return <h1>App</h1>;
}

클래스형 컴포넌트가 덜 사용되게 된 이유

1. 복잡한 생명주기 메서드
   • componentDidMount, componentDidUpdate 등 여러 생명주기 메서드를 사용해야 하며, 이를 관리하기가 까다로움
2. this 바인딩 문제
   • 클래스 내부의 메서드에서 this를 명시적으로 바인딩하거나 bind를 사용해야 해서 추가적인 작업이 필요함
3. 보일러플레이트 코드
   • 클래스형 컴포넌트는 상태 선언 등 기본 작업을 위해 불필요한 코드가 많이 작성됨

---

함수형 컴포넌트를 선호하는 현재 이유

1. Hooks 도입
   • useState, useEffect 등의 훅을 통해 상태 관리와 생명주기 메서드를 간결하고 직관적으로 처리 가능
2. 간결한 코드
   • 함수형 컴포넌트는 클래스형 컴포넌트와 달리 불필요한 코드 없이 로직에 집중 가능
3. 테스트 용이성
   • 순수 함수로 작성되어 테스트가 더 간단함
4. 성능 최적화
   • React 팀이 함수형 컴포넌트에 최적화 작업을 집중하는 중
5. 커스텀 훅 사용
   • 반복되는 로직을 커스텀 훅으로 분리하여 재사용성과 가독성을 높일 수 있음

---

React.Fragment

JSX에서는 여러 요소를 반환할 때 반드시 하나의 최상위 태그가 필요함. 이때 React.Fragment를 사용하면 불필요한 DOM 요소를 생성하지 않고 요소를 그룹화할 수 있음

React.Fragment의 전체 구문

import React from "react";

return (
  <React.Fragment>
    <h1>제목</h1>
    <p>내용</p>
  </React.Fragment>
);

단축 구문

React에서는 단축 문법으로 빈 태그 <>를 사용 가능. 이는 React.Fragment의 축약형임

return (
  <>
    <h1>제목</h1>
    <p>내용</p>
  </>
);

주의사항:

• React.Fragment는 DOM에 추가 요소를 생성하지 않음
• JSX 코드는 항상 src 폴더 내부에서 작성해야 함

---

리액트에서 루트 컴포넌트

리액트 프로젝트에서 가장 최상위 컴포넌트를 루트 컴포넌트라고 하며, 일반적으로 App 컴포넌트가 루트 컴포넌트의 역할을 수행

컴포넌트 트리와 DOM 트리

• 컴포넌트 트리: 리액트에서의 컴포넌트 계층 구조를 의미
• DOM 트리: 브라우저가 렌더링한 HTML 요소들의 계층 구조로, 요소들 간의 부모-자식 및 형제 관계를 포함