Component 기반의 구조이며, 모든 페이지가 Component 구성되어 있고 하나의 Component 또 다른 여러 개의 Component 조합으로 구성될 수 있다.
이러한 Component들을 마치 레고 블록을 조립하듯 끼워 맞춰 새로운 Component 만들 수 있다.
Component : 입력(props)을 받아 출력(Element) 하는 역할

React Component는 크게 두 가지 방식으로 작성한다.

함수형 컴포넌트 (Function Component)
클래스형 컴포넌트 (Class Component)

※현재는 함수형을 많이 쓰지만 그래도 클래스가 무엇인지는 알고 있어야 하니 같이 작성한다.

1. 🛬클래스형 컴포넌트 (Class Component)

클래스형 컴포넌트 Class Component
React의 초기 버전에서 사용되던 컴포넌트 작성 방법
ES6 클래스 문법을 사용하여 컴포넌트를 정의하고, React에서 제공하는 render() 메서드를 통해 UI를 렌더링 한다.
장점으로는 상태(state)와 생명주기 메서드를 사용할 수 있다.
하지만 React 16.8에서 훅(Hooks)이 도입된 이후로 함수형 컴포넌트(Function Component가 주로 사용된다.
예전 코드나 라이브러리에서는 클래스형 컴포넌트는 아직 사용되고 있으니 간단하게 이해는 하는게 좋을 것 같다.

특징

• 상태 관리: 클래스형 컴포넌트는 this.state를 사용 상태를 관리
• 생명주기 메서드: 클래스형 컴포넌트에서는 컴포넌트의 생명주기(마운트, 언마운트, 업데이트 등)를 관리할 수 있는 여러 생명주기 메서드를 사용할 수 있다.
• render() 메서드: React.Component의 하위 class에서 반드시 정의해야 하는 메서드
• 고정적: 컴포넌트 클래스를 선언하는게 아닌 합성을 주로 사용합

상태 관리 (this.state와 this.setState)
상태를 관리하려면, 클래스의 생성자(constructor)에서 this.state를 초기화하고, 상태를 변경할 때는 this.setState() 메서드를 사용

import React, { Component } from 'react';

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

  plus = () => {
    this.setState({ count: this.state.count + 1 });
  }

  minus = () => {
    this.setState({ count: this.state.count - 1 });
  }

  render() {
    return (
      <div>
        <button onClick={this.plus}>+1</button>
        <button onClick={this.minus}>-1</button>
		<p>Count: {this.state.count}</p>
      </div>
    );
  }
}

export default Counter;

• this.state는 컴포넌트의 상태고 this.setState()를 사용하여 상태를 변경된다.
• setState()는 상태가 변경될 때마다 컴포넌트를 리렌더링 된다.

---

2. 🛫함수형 컴포넌트 (Function Component)

React 16.8부터 Hooks가 도입되면서 함수형 컴포넌트가 주로 사용된다.
상태(state)나 생명주기 메서드(lifecycle methods)를 다루기 위해 useState, useEffect 등의 훅을 사용있다.
이 방식은 JavaScript 함수로 작성 UI를 반환하는 간단한 구조를 가지고 있다.
React 16.8이전에는 클래스형 컴포넌트가 사용되었지만, 현재는 함수형 컴포넌트가 훨씬 더 선호되고 있다.

특징

1)단순함: 함수형이 클래스형보다 읽시 쉽고 간결
2)상태와 이펙트 관리: useState, useEffect와 같은 React 훅(Hook)을 사용하여 상태 관리와 생명주기 관리
3)컴포넌트 재사용성 함수형 컴포넌트는 다른 함수나 컴포넌트와 쉽게 결합 및 재사용에 용이

장점

간결성: 코드가 간결하고 읽기 쉬우며, 시간 단축 및 유지보수가 용이.
성능: 함수형 컴포넌트를 최적화
Hooks를 통한 기능 확장: useState, useEffect, useContext, useReducer 등 다양한 훅을 통해 상태 관리, 사이드 이펙트 처리, 데이터 공유, 등 처리 가능

Hooks에 대해 자세히 알고 싶으면 아래 참고

---

💺Component 주의사항

1.이름규칙

• 소문자로 시작하는것은 컴포넌트를 DOM태그로 인식하기 떄문에 항상 대문자로 시작

소문자로 시작하면 html div 태그로 인식

const element = <div/>;

Welcome 이라는 컴포넌트를 사용자가 정의 대문자로 하여금 리액트 Component로 인식

cosnt element = <Welcome name="홍길동"/>

2.JSX 내 중괄호{} 사용

• JavaScript 코드 변수나 함수를 사용하려면 중괄호 {}를 사용

const name = 'mini';
return <h1>Hello, {name}!</h1>;  // "Hello, mini" 출력

3.상태(state) 변경은 비동기적

• 상태가 즉시 변경되지 않으므로 상태 변경 후 바로 상태를 읽을 때는 예상한 값이 아닐 수 있다.
• 상태 변경을 연속적으로 할 때는 함수형 setState를 사용한다.

4.컴포넌트는 단일

• 순수 함수형 컴포넌트는 입력값(props)에 의해서만 결정된 출력값(JSX)을 반환
  컴포넌트 내에서 직접 상태를 변경하거나 외부에 의존적인 값을 변경하면 안된다.
  예를 들어, 컴포넌트 내에서 외부 변수나 API 호출을 직접 다룬다면, 이는 컴포넌트가 순수하지 않게 되어 결과적으로 애플리케이션의 상태 관리가 복잡해질 수 있다.

5.렌더링 최적화

• 상태나 props가 변경될 때마다 자동으로 리렌더링을 한다. (불필요한 리렌더링을 피하는 것이 중요)

6.Props는 읽기 전용

• props는 부모 컴포넌트에서 전달된 값이므로, 자식 컴포넌트에서 직접 수정하면 안된다.
  props를 수정하려면 부모 컴포넌트에서 상태를 변경하고, 그에 따라 자식 컴포넌트가 변경된 props를 받도록 해야 한다.

7.리스트 렌더링 시 key 사용

• 리스트 항목을 렌더링할 때는 각 항목에 고유한 key 값을 지정

• key가 없으면 리렌더링 시 React가 각 항목을 재구성하는 데 불필요한 비용이 발생

8.불변성 유지

*상태나 props는 불변이어야 합니다. 즉, 객체나 배열의 상태를 직접 수정하는 것이 아니라 새로운 객체나 배열을 만들어야 합니다.
상태를 배열로 다룰 때 push() 대신 concat()을 사용해야 한다. 상태가 직접 변경되면 변화를 감지하지 못할 수 있기떄문

// 불변성 위반 (잘못된)
this.state.items.push(newItem);

// 불변성 유지 (올바른)
this.setState({ items: [...this.state.items, newItem] });

🚀결론

React 컴포넌트를 작성할 때 위와 같은 주의사항들을 지키는 것이 중요하며, 이를 통해 성능 최적화, 코드의 유지보수성 향상, 에러 방지 등을 할 수 있다.
컴포넌트를 잘 구조화하고 관리하는 것이 핵심!

• 기능 단위로 재사용 가능한 단위로 작성하는게 제일 좋다.
• 재사용 컴포넌트가 많을 수록 개발 속도가 빨라진다.

※ 본 포스팅은 인프런 강의와 리액트 페이지를 보며 정리한 내용입니다.