Presentational 컴포넌트와 Stateful (Container) 컴포넌트

리액트에서 컴포넌트를 설계하고 구현할 때, 컴포넌트를 두 가지 주요 유형으로 분류하는 방식이 있습니다: Presentational 컴포넌트와 Stateful 컴포넌트 또는 Container 컴포넌트라고도 합니다.

1. Presentational 컴포넌트?

Presentational 컴포넌트는 이름에서도 알 수 있듯이, 주로 UI의 '표현'에 집중하는 컴포넌트입니다. 이 컴포넌트는 어떠한 비즈니스 로직이나 데이터 관리 로직을 포함하지 않고, 주로 받아온 props를 사용하여 UI를 렌더링하는 역할을 합니다.

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

2. Stateful 컴포넌트?

Stateful 컴포넌트는 내부에 상태(state)를 가지며, 이를 기반으로 UI를 동적으로 변경하거나 사용자의 인터랙션에 반응하는 등의 로직을 처리합니다. 이 컴포넌트는 주로 데이터 관리나 비즈니스 로직을 포함하게 됩니다.

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(prevState => ({ seconds: prevState.seconds + 1 }));
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <div>Seconds: {this.state.seconds}</div>;
  }
}

3. 요약

Presentational 컴포넌트는 UI 표현에 집중, State와 생명주기 메서드 없음. UI 표현에 집중, 리덕스나 API 호출과 같은 로직을 포함하지 않음

Stateful 컴포넌트는 동적 데이터 및 비즈니스 로직 처리, state와 생명주기 메서드를 가짐

이 두 종류의 컴포넌트를 적절히 활용하면, 코드의 가독성과 재사용성을 향상시킬 수 있고 각 컴포넌트의 역할을 분명히 해두면 유지보수도 쉬워짐.