component와 container의 차이

React 에서 component 파일과 container 파일은 다른 역할을 한다.

 

Component 파일: 화면에 보여지는 요소들(부분들), 데이터를 가공한다.

(그래픽적으로 화면을 구성하는 UI 요소를 정의하는 곳 예를 들어 버튼, 폼, 카드 등의 화면 요소)

 

Container 파일: 데이터 관리 부분을 담당한다.

(UI 요소와 상태 로직을 연결하는 역할, 폼에서 입력된 데이터를 처리하고, API 호출을 수행하는 등의 상태 관리 역할)

 

components 폴더 안에 AddTodo.js 와 Todolist.js 파일이 있고, containers 폴더에 TodoContainers 파일이 있다.

 

AddTodo.js

import { MdOutlineAdd } from "react-icons/md";

const AddTodo = () => { //할일 등록
    return (
        <form autoComplete="off">
            <input type="text" />        
            <button type="submit">
                <MdOutlineAdd />
            </button>
        </form>
    
    );

};

export default AddTodo;

 

 

TodoList.js

import { MdCheckBox,MdCheckBoxOutlineBlank } from "react-icons/md";

const TodoList = () => {
  return <h1>할일 목록</h1>;
};

export default TodoList;

 

TodoContainers.js

const intialValue = [
    { id: 1, title: '할일1', done: false },
    { id: 2, title: '할일2', done: false },
    { id: 3, title: '할일3', done: false },
];
const TodoContainer = () => {
    const [items, setItems] = useState(intialValue);
    return (
        <>
            <AddTodo />
            <TodoList items={items} />
        </>
    );
};

export default TodoContainer;

 

결과