HongLim_ToDoList만들기(1)-리액트 설정

먼저 프로젝트에 리액트를 설치를 해주도록 하자 

vscode에서 기본으로 지원하는 터미널에 git bash를 연결하였다.

 

create-react-app todolist

create-react-app을 사용해서 todolist라는 파일에 react세팅을 해주도록 하자.

빌드에 성공하면 

Happy hacking이라는 글이 뜬다.

이제 happy hacking글 위에 명령어(cd , yarn start)를 순서대로 치면 로컬호스트로 서버가 열린다.

이제 리액트 웹 서버가 열린것을 볼 수 있다. 브라우저를 보면 React App이라는 웹이 생긴것을 볼 수 있다.

이제 리액트 앱을 만들었으니 설정을 해주도록 하자.

 

App.css의 내용을 모두 지워주고,App.js에서 

이렇게 설정을 해주자.

그렇게 저장을 하고 리액트앱을 보면 싹다 비워진것을 볼 수 있다.

 

그다음 App.js파일에 

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

function App() {
    return (
        <div className="App">
            <ToDoForm></ToDoForm>
        </div>
    );
}

function ToDoForm() {
    return (
        <div className="ToDoForm_Wrapper">
            <div></div>
        </div>
    );
}

export default App;

ToDoForm이라는 컴포넌트를 만들고 여기서 로직을 작성하도록 하자.

 

ToDoList개발은 Velopert님의 블로그를 참고하여 만들었다.

velopert.com/3480

React 기초 입문 프로젝트 – 흔하디 흔한 할 일 목록 만들기 | VELOPERT.LOG

작성된 초기 코드를 보면 

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

const Todo = ({ form, children }) => {
    return (
        <main className="todo_wrap">
            <div className="title">오늘 할 일</div>
            <section className="form_wrapper">{form}</section>
            <section className="todos_wrapper">{children}</section>
        </main>
    );
};

export default Todo;

 

title에 "오늘 할 일"이라고 알리고 

section을 나뉘어 form과 children을 출력하게 했다.

이렇게 저장을 해서 화면을 보면 오늘 할 일 이라고만 뜨고 form이랑 children은 뜨지 않는다.

그 이유는 app에서 속성값을 전달하지 않아서이다.

그래서 아무것도 받지 않았기때문에 아무것도 출력하지 않은것이다.

 

속성값을 받는 부분은 ({ form , children }) 이부분인데 비구조화 할당을 통해서 prop에 form과 children을 추출해서 

바로 사용할 수 있게 해준다.

 

여기서 children은 App에서 사용할때 <Todo></Todo>사이에 값 즉 

<Todo>여기!</Todo>

에서 들어가게 된다.

콘솔창을 보면 

이렇게 section안에 값이 들어간것을 알 수 있다.

 

그럼 form은 어떻게 전달할까?

import React, { useState } from "react";
import "./App.css";
import Todo from "./components/Todo";
function App() {
    return (
        <div className="App">
            <Todo form={<div>form은 이렇게 전달된다</div>}>Children이다.</Todo>
        </div>
    );
}

export default App;

html처럼 속성값을 전달하는것을 볼 수 있다.

여기서 {}안에 감싸져 있는것은 JavaScript의 문법을 사용할 수 있다는 뜻이다.

근데 왜 div태그가 있냐고 할 수 있는데 

저것은 HTML이 아니라 JSX라는 JavaScript의 한 종류이다. 

 

이제 css를 조금 건들여서 꾸며주도록 하자

이렇게 간단한 css로 멋진 모양을 만들었다.

출처 : velopert

리액트의 컴포넌트를 구현할때는 위 사진과 같은 개념으로 흘러가게 된다.

 

이제 form을 꾸며주는 부분을 구현해보도록 하자.

 

밥먹고 하자.

 

배고파...