[리액트] React.js 컴포넌트란?

React.js Component에 대한 자세한 설명

1. 컴포넌트(Component)란?

React.js는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, **Component(컴포넌트)**라는 개념을 중심으로 구성되어 있습니다. 컴포넌트는 화면을 구성하는 독립적이고 재사용 가능한 UI 단위입니다. 예를 들어 버튼, 폼, 네비게이션 바 등은 각각 하나의 컴포넌트가 될 수 있습니다. 컴포넌트를 통해 복잡한 UI를 작은 단위로 쪼개어 관리할 수 있으며, 각각의 컴포넌트는 고유한 상태(state)와 속성(props)을 가질 수 있습니다.

 

2. 컴포넌트의 종류

React에서 컴포넌트는 크게 두 가지로 나뉩니다.

2.1 함수형 컴포넌트 (Function Component)

함수형 컴포넌트는 JavaScript 함수로 정의되며, React 16.8 이후부터는 useState, useEffect 등 Hooks를 사용할 수 있게 되면서 사실상 클래스형 컴포넌트를 대체하고 있습니다.

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

 

2.2 클래스형 컴포넌트 (Class Component)

클래스형 컴포넌트는 ES6 클래스 문법을 사용하며, render() 메서드를 통해 UI를 반환합니다. 또한 this.state와 this.setState()를 통해 상태를 관리합니다.

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

 

 

3. Props와 State

3.1 Props

Props(속성)는 컴포넌트 간 데이터를 전달할 때 사용됩니다. 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 수 있으며, 자식 컴포넌트는 해당 값을 읽기만 할 수 있습니다(immutable).

function Greeting(props) {
  return <h1>Welcome, {props.username}!</h1>;
}

3.2 State

State는 컴포넌트 내부에서 데이터를 저장하고 관리할 수 있는 객체입니다. 사용자 입력, API 호출 결과 등 동적인 데이터를 저장합니다.

const [count, setCount] = useState(0);

함수형 컴포넌트에서는 useState, 클래스형 컴포넌트에서는 this.state와 this.setState()를 사용합니다.

 

 

4. 컴포넌트 생명주기 (Lifecycle)

컴포넌트는 생성(Mount), 업데이트(Update), 제거(Unmount) 단계를 거칩니다. 클래스형 컴포넌트에서는 다음과 같은 생명주기 메서드가 존재합니다.

단계 메서드

Mount	constructor(), componentDidMount()
Update	componentDidUpdate(prevProps, prevState)
Unmount	componentWillUnmount()

함수형 컴포넌트에서는 useEffect() 훅을 사용하여 생명주기 메서드를 구현할 수 있습니다.

useEffect(() => {
  // 마운트 후 실행
  return () => {
    // 언마운트 시 실행
  };
}, []);

 

 

5. 컴포넌트의 재사용성과 조합

React 컴포넌트는 독립적으로 구성되며 재사용이 가능합니다. 컴포넌트를 조합하여 더 복잡한 UI를 구성할 수 있습니다. 이를 **컴포지션(Composition)**이라고 하며, React의 핵심 개념 중 하나입니다.

function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

6. 컨테이너 컴포넌트와 프레젠테이셔널 컴포넌트

React 애플리케이션을 설계할 때, 컴포넌트를 다음과 같이 분리하는 방식이 있습니다.

• 프레젠테이셔널 컴포넌트: UI를 보여주는 역할, 상태를 가지지 않음
• 컨테이너 컴포넌트: 상태와 로직을 관리, 프레젠테이셔널 컴포넌트를 포함

이러한 구조는 컴포넌트의 역할을 명확히 하고 유지보수성을 높입니다.

 

 

7. 고차 컴포넌트(HOC: Higher-Order Component)

고차 컴포넌트는 하나의 컴포넌트를 입력으로 받아서 새로운 컴포넌트를 반환하는 함수입니다. 컴포넌트의 재사용성과 확장성을 높이는 데 유용합니다.

function withLogger(WrappedComponent) {
  return function(props) {
    console.log('Rendering', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}

 

 

8. 커스텀 훅을 통한 컴포넌트 로직 재사용

React Hooks를 이용하면 함수형 컴포넌트에서도 복잡한 로직을 재사용할 수 있습니다. 자주 쓰이는 로직을 useForm, useAuth 등의 커스텀 훅으로 분리하면 코드가 더 깔끔하고 유지보수가 쉬워집니다.

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(count + 1);
  return [count, increment];
}

9. 최적화: React.memo와 useCallback

React는 모든 상태 변경 시 컴포넌트를 다시 렌더링합니다. 성능 최적화를 위해 React.memo, useMemo, useCallback 같은 도구를 제공합니다.

const MemoizedComponent = React.memo(MyComponent);

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

10. 결론

React 컴포넌트는 UI를 구성하는 핵심 단위이며, 함수형 컴포넌트를 중심으로 설계되고 있습니다. 상태와 속성을 이용한 동적 렌더링, 생명주기를 활용한 부수 효과 관리, 그리고 재사용성과 확장성을 고려한 컴포넌트 설계는 React의 강력한 특징입니다. React는 복잡한 웹 애플리케이션을 모듈화된 방식으로 구축할 수 있게 해주며, 현대 프론트엔드 개발에서 가장 널리 사용되는 라이브러리 중 하나로 자리잡고 있습니다.