React로 TodoApp 만들기 (1)Setup

부트캠프가 끝나고 많은 사람들이 더 심화되고, 새로운 언어 기반으로, 더 어려운 수준의 추가 프로젝트를 진행하고 있는 듯 하여 대단해보인다.. 물론 코딩이란걸 처음 시작했을 때 "나"보다는 현재의 "내"가 더 발전해있는 모습이고, 불안해하지 말자고 매일 다짐하지만 난 내가 기본기가 여전히 많이 부족하구나를 계속 깨달으며 많이 좌절하는 요즘인것같다.. 그 어떤 프로그래밍 언어를 쓰건 하나의 홈페이지를 만들 때, CRUD를 정말 완벽하게 손쉽게 구현할 수 있는가를 스스로에게 물어본다면 너무나도 당연히 NO였다.. 그래서 난 더 어렵기보단 기본기를 다시 한 번 닦고자 프로젝트 전 부트캠프에서 과제로 줬던 (난 실패했던) Todo App을 다시 한번 만들어보고자 시작했다.

1. React Component 만들기

React로 개발 시작하기

npx create-react-app todo-bin

• Template.js & Template.css
  • 전체 템플릿, 뼈대, 구조를 담당 
• TodoInsert.js & TodoInsert.css
  • 글 추가 (CREATE) 기능용 컴포넌트
  • pop-up(Modal)창처럼 띄울꼬야
• TodoItem.js & TodoItem.css
  • 하나하나의 글 관리 컴포넌트
• TodoList.js & TodoList.css
  • 전체 글 관리 컴포넌트
• App.js & App.css
  • 전체 화면 렌더링 컴포넌트

---

2. 기본 컴포넌트 만들기

• App.js
  • 일단 App.js를 밑에처럼 작성하면 빈 화면에 "안녕하세요"만 뜨고 있어요

• Template.js
  • 뼈대를 구성하는 걸 만들어줘요. 위에 App.js <div>에 넣어줄꺼예요.

import React from "react";
import "./Template.css";

const Template = ({ children}) => {
    return (
        <div className='Template'>
            <div className='title'>오늘의 할 일 (0)</div>
            <div>{children}</div>
        </div>
    );
};

export default Template;

이 때, Template에 children을 전달인자로 전해줘서 오늘의 할 일 밑에 컴포넌트로 띄워주면

App.js에서 적용할 때  <Template>안녕하세요</Template> OR <Template><TodoList/></Template> 처럼 Template사이에 들어가는 문자열이나 자식 컴포넌트 등을 화면에 그대로 띄워줍니다. 

---

• App.js

import React, { useState } from "react";
import "./App.css";
import Template from "./components/Template";
import TodoInsert from "./components/TodoInsert";
import TodoList from "./components/TodoList";

const App = () => {

	//React Hook을 이용해 기본 할일 목록 정의
    const [todos, setTodos] = useState([
        {
            id: 1,
            text: "할일 1",
            checked: true,
        },
        {
            id: 2,
            text: "할일 2",
            checked: false,
        },
        {
            id: 3,
            text: "할일 3",
            checked: true,
        },
    ]);

    return (
        <Template todoLength={todos.length}>
            <TodoList
                todos={todos} //todos리스트 보내주기
            />
        </Template>
    );
};

export default App;

• Template.js

import React from "react";
import "./Template.css";

const Template = ({ children, todoLength }) => {
    return (
        <div className='Template'>
            <div className='title'>오늘의 할 일 ({todoLength})</div>
            <div>{children}</div>
        </div>
    );
};

export default Template;

• TodoList.js
  • 이 때, map을 이용하면 고유한 id값을 꼭 key에 넣어줘야 warning이 안뜬다!

import React from "react";
import TodoItem from "./TodoItem";
import "./TodoList.css";

const TodoList = ({todos}) => {
    return (
        <div className='TodoList'>
            {todos.map((todo) => ( //map을 통해 하나하나 뿌려주기
                <TodoItem
                    key={todo.id}
                    todo={todo}
                />
            ))}
        </div>
    );
};

export default TodoList;

• TodoItem.js
  • 객체 분해 할당을 이용해서 text부분 "할일1","할일2","할일3"을 화면에 띄워주기

그럼 따단하고 완성

---

❓❓❓ React Hook?

함수 컴포넌트 안에서 state를 사용 할 수 있게 해주는 것!!