component파일과 container파일의 차이

React.js에서 component 파일과 container 파일은 두 가지 다른 역할을 하는 구성 요소입니다.

Component 파일: 그래픽적으로 화면을 구성하는 UI 요소를 정의하는 곳입니다. 예를 들어, 버튼, 폼, 카드 등의 화면 요소입니다.

Container 파일: UI 요소와 상태 로직을 연결하는 역할을 합니다. 예를 들어, 폼에서 입력된 데이터를 처리하고, API 호출을 수행하는 등의 상태 관리 역할을 합니다.

간단하게 말하면, component 파일은 화면에서 보여지는 부분을, container 파일은 뒷단에서의 데이터 관리 부분을 관장합니다.

예시를 위한 간단한 검색 폼을 구현하는 경우를 생각해 보겠습니다.

Component 파일:

import React from 'react';

const SearchForm = ({ handleSubmit, handleChange, searchTerm }) => (
  <form onSubmit={handleSubmit}>
    <input type="text" value={searchTerm} onChange={handleChange} />
    <button type="submit">Search</button>
  </form>
);

export default SearchForm;

Container 파일:

import React, { useState } from 'react';
import SearchForm from './SearchForm';

const SearchFormContainer = () => {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSubmit = event => {
    event.preventDefault();
    console.log(`Searching for: ${searchTerm}`);
  };

  const handleChange = event => {
    setSearchTerm(event.target.value);
  };

  return (
    <SearchForm
      handleSubmit={handleSubmit}
      handleChange={handleChange}
      searchTerm={searchTerm}
    />
  );
};

export default SearchFormContainer;

Component 파일에서는 폼과 버튼의 UI를 구현하고, Container 파일에서는 handleSubmit 함수와 handleChange 함수를 통해 폼 제출시의 동작과 텍스트 입력시의 상태 관리를 구현하였습니다.

최근 방식은 container를 사용하지 않고 custom hook을 사용해 만든다고 한다.

https://doiler.tistory.com/38