컴포넌트 분리

  이번 포스팅에서는 ToDo App의 컴포넌트를 분리합니다. 컴포넌트를 분리할 때는 최대한 재사용이 가능하도록 합니다. ToDo App에서는 할 일 목록을 보여주는 List 컴포넌트와 할 일을 입력하는 Form 컴포넌트를 분리합니다.

 

List Component

1. components 폴더를 생성하고 Lists.js 파일을 생성합니다.
2. 리스트에 관련된 UI 부분을 가져옵니다.
3. 필요한 state, 함수 등을 가져옵니다.
4. Lists 컴포넌트에 props를 내려줍니다.
5. props로 필요한 데이터, 함수를 가져옵니다.

 

Lists.js

import React from 'react'

export default function Lists({ todoData, setTodoData }) {
    const btnStyle = {
        color: "#fff",
        border: "none",
        padding: "5px 9px",
        borderRadius: "50%",
        cursor: "pointer",
        float: "right"
    };

    const getStyle = (completed) => {
        return {
            padding: "10px",
            borderBottom: "1px #ccc dotted",
            textDecoration: completed ? 'line-through' : "none",
        }
    };

    const handleClick = (id) => {
        let newTodoData = todoData.filter((data) => data.id !== id);
        setTodoData(newTodoData);
    };

    const handleCompleChange = (id) => {
        let newTodoData = todoData.map((data) => {
            if (data.id === id) {
                data.completed = !data.completed;
            }
            return data;
        });
        setTodoData(newTodoData);
    };

    return (
        <div>
            {todoData.map((data) => (
                <div style={getStyle(data.completed)} key={data.id}>
                    <input
                        type="checkbox"
                        onChange={() => handleCompleChange(data.id)}
                        defaultChecked={false} />
                    {data.title}
                    <button style={btnStyle} onClick={() => handleClick(data.id)}>x</button>
                </div>
            ))}
        </div>
    )
}

 

Note. props vs state

• props(properties): 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법입니다. props는 읽기 전용(immutable)으로 부모 컴포넌트에서 state를 변경시켜줘야 합니다.
• state: 해당 컴포넌트 내부에서 데이터를 전달하는 방법입니다. 변경 가능(mutable) 하며, state가 변하면 re-render 됩니다.

 

Form Component

1. components 폴더 하위 Form.js 파일을 생성합니다.
2. UI 부분을 가져옵니다.
3. 필요한 함수를 가져옵니다.
4. Form 컴포넌트에 props를 내려줍니다.
5. props로 필요한 데이터, 함수를 가져옵니다.

 

Form.js

import React from 'react'

export default function Form({ handleSubmit, value, setValue }) {

    const handleChange = (e) => {
        setValue(e.target.value);
    };


    return (
        <form style={{ display: 'flex' }} onSubmit={handleSubmit}>
            <input
                type="text"
                name="value"
                style={{ flex: 10, padding: '5px' }}
                placeholder="해야 할 일을 입력하세요."
                value={value}
                onChange={handleChange}
            />
            <input
                type="submit"
                value="입력"
                className="btn"
                style={{ flex: 1 }}
            />
        </form>
    )
}

 

App.js

import React, { useState } from "react";
import "./App.css";
import Lists from "./components/Lists";
import Form from "./components/Form";

export default function App() {
  const [todoData, setTodoData] = useState([]);
  const [value, setValue] = useState("");

  const handleSubmit = (e) => {
    ... 생략 ...
  };

  return (
    <div className="container">
      <div className="todoBlock">
        <div class="title">
          <h1>할 일 목록</h1>
        </div>
        
        {/* List Component */}
        <Lists todoData={todoData} setTodoData={setTodoData} />

        {/* Form Component */}
        <Form handleSubmit={handleSubmit} value={value} setValue={setValue} />

      </div>
    </div>
  );
}

 

• 소스코드 변경부분

 

 

 

[참고 정보]

인프런- 따라하며 배우는 리액트 A-Z