Component

React에서 컴포넌트는 UI의 독립적이고 재사용 가능한 부분을 구성하는 핵심 단위입니다

 

컴포넌트는 크게 두 가지 유형으로 나눌 수 있습니다

 

<알아야할 개념>
Props: 컴포넌트에 전달되는 입력 값으로, 부모 컴포넌트로부터 받은 데이터입니다. Props는 읽기 전용이며, 컴포넌트 내부에서 수정할 수 없습니다.
State: 컴포넌트의 상태를 나타내는 데이터로, 컴포넌트 내부에서 관리됩니다. 상태가 변경되면, 컴포넌트는 자동으로 다시 렌더링됩니다.
생명주기 메서드: 클래스 컴포넌트에서 사용할 수 있는 메서드로, 컴포넌트의 생성부터 소멸까지 다양한 시점에 특정 작업을 수행할 수 있게 해줍니다. 예를 들어, componentDidMount는 컴포넌트가 마운트된 후 실행되는 메서드입니다.

 

1. 함수형 컴포넌트(Functional Components)

 

정의: 함수형 컴포넌트는 JavaScript 함수로 정의됩니다. 이 함수는 props를 입력으로 받고, React 요소를 반환합니다. 함수형 컴포넌트는 상태(state)와 생명주기 메서드(lifecycle methods)를 가지지 않았지만, React 16.8부터는 Hook을 통해 이러한 기능을 사용할 수 있게 되었습니다.
장점: 간결하고, 이해하기 쉽고, 작성하기 편리합니다. 메모리 자원을 덜 사용하고, 성능 측면에서도 조금 더 효율적일 수 있습니다.
Hook 사용: useState, useEffect 등의 Hook을 사용하여 상태 관리와 부수 효과(side effects)를 처리할 수 있습니다.

 

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

아래의 Counter도 함수이다.

const Counter = () => {
  return <div>Hello, world!</div>;
};

 

 

2. 클래스 컴포넌트(Class Components).

 

정의: 클래스 컴포넌트는 ES6의 클래스를 활용하여 정의됩니다. React.Component를 상속받아 생성되며, render 메소드를 통해 React 요소를 반환합니다. 상태(state) 관리와 생명주기 메서드를 통해 더 복잡한 컴포넌트의 동작을 구현할 수 있습니다.
장점: 복잡한 UI 로직을 관리하기 쉽고, 상태(state) 및 생명주기 메서드(lifecycle methods)를 사용할 수 있어 기능적으로 더 강력합니다.

 

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

주요 차이점
정의 방식: 함수형 컴포넌트는 순수 JavaScript 함수이며, 클래스형 컴포넌트는 ES6 클래스를 사용합니다.
상태 관리: 함수형 컴포넌트는 Hooks를 통해 상태를 관리하지만, 클래스형 컴포넌트는 this.state와 this.setState를 사용합니다.
생명주기 메서드: 함수형 컴포넌트에서는 useEffect Hook을 사용하여 생명주기 이벤트를 처리하지만, 클래스형 컴포넌트에서는 생명주기 메서드를 직접 사용합니다.
코드의 간결함: 함수형 컴포넌트는 일반적으로 클래스형 컴포넌트보다 더 간결하고 읽기 쉽습니다.
Hooks 사용: 함수형 컴포넌트는 React 16.8 이후로 Hooks를 사용하여 이전에 클래스형 컴포넌트에서만 가능했던 기능들을 구현할 수 있게 되었습니다.