반응형
state
-
컴포넌트 분리FrontEnd/React 2023. 11. 16. 05:00
이번 포스팅에서는 ToDo App의 컴포넌트를 분리합니다. 컴포넌트를 분리할 때는 최대한 재사용이 가능하도록 합니다. ToDo App에서는 할 일 목록을 보여주는 List 컴포넌트와 할 일을 입력하는 Form 컴포넌트를 분리합니다. List Component components 폴더를 생성하고 Lists.js 파일을 생성합니다. 리스트에 관련된 UI 부분을 가져옵니다. 필요한 state, 함수 등을 가져옵니다. Lists 컴포넌트에 props를 내려줍니다. props로 필요한 데이터, 함수를 가져옵니다. Lists.js import React from 'react' export default function Lists({ todoData, setTodoData }) { const btnStyle = { ..