[chapter 3] 간단한 To-Do 앱 만들며 리액트 익히기 - 2

To-Do 앱 만들기 시작

1. 원래 있던 부분 지우기

• app.js, app.css, index.css를 지운당

2. 바탕 색 바꾸기

• index.css에 배경색 넣는다

3. 컨테이너 만들기
   클래스방식과 함수방식이 있는데
   클래스 방식으로 먼저작성을 해보자

클래스 방식

import React, {Component} from "react";  // 리액트 라이브러리에서 컴포넌트 들고오기

export default class App extends Component{ // 컴포넌트를 사용할 수 있게 extends
  render(){
    reutnr(
      <div>
        안녕하세요. 
      </div>
    )
  }
}

뭐 이런식으로 해서 이제 index.html에 박스를 만들고
그 안에 할일 목록을 적어보자

App.js

import React, {Component} from "react";  // 리액트 라이브러리에서 컴포넌트 들고오기
import "./App.css";

export default class App extends Component{ // 컴포넌트를 사용할 수 있게 extends
  render(){
    return(
      <div className="container">
        <div className="todoBlock">
          <div className="title">
            <h1>할 일 목록</h1>
          </div>

        </div>
      </div>
    )
  }
}

App.css

.container{
  margin: auto;
  max-width: 600px;
}

.todoBlock{
  padding: 30px;
  margin-top: 50px;
  background: #fff;
  border-radius: 10px;
  box-shadow: -9px 17px 13px rgb(0 0 0/ 16%);
}

div로 감싸줘야하는거랑 className으로 클래스를 정하는거 정도가 다른것같당.

할 일 목록 UI 만들기(JSX, CSS 작성)

이제 할 일목록들을 만들어보자

          <div>
            <input type="checkbox" defaultChecked={false}></input>
            공부하기 
            <button>X</button>
          </div>

이르케 작성하고나면
이르케 나온다
이제 스타일링해주자

import React, {Component} from "react";  // 리액트 라이브러리에서 컴포넌트 들고오기
import "./App.css";

export default class App extends Component{ // 컴포넌트를 사용할 수 있게 extends
  btnStyle = {
    color : "#fff",
    boder : "none",
    padding : "5px 9px",
    borderRadius : "50%",
    cursor : "pointer",
    float : "right",
  }

  render(){
    return(
      <div className="container">
        <div className="todoBlock">
          <div className="title">
            <h1>할 일 목록</h1>
          </div>
          <div>
            <input type="checkbox" defaultChecked={false}></input>
            공부하기 
            <button style={this.btnStyle}>X</button>
          </div>
        </div>
      </div>
    )
  }
}

이르케 button안에 스타일을 주고 이름을 만들어서 안에 객체하듯이 스타일링해주면된다.
줄 긋는건 동적으로 만들기 위해서 함수로 만들었다.

import React, {Component} from "react";  // 리액트 라이브러리에서 컴포넌트 들고오기
import "./App.css";

export default class App extends Component{ // 컴포넌트를 사용할 수 있게 extends
  btnStyle = {
    color : "#fff",
    boder : "none",
    padding : "5px 9px",
    borderRadius : "50%",
    cursor : "pointer",
    float : "right",
  }
getStyle = () =>{
  return{
    padding : "10px",
    borderBottom:"1px #ccc dotted",
    textDecoration : "none"
  }
}
  render(){
    return(
      <div className="container">
        <div className="todoBlock">
          <div className="title">
            <h1>할 일 목록</h1>
          </div>
          <div style={this.getStyle()}>
            <input type="checkbox" defaultChecked={false}></input>
            공부하기 
            <button style={this.btnStyle}>X</button>
          </div>
        </div>
      </div>
    )
  }
}

이렇게 함수작성해서 스타일에서 불러오면된다.
그러면 짜라란~

Map 메소드를 사용한 할 일 목록 나열

이런식으로 하드코딩하는건 매우~ 별로니깐 할 일 목록 데이터를 만들어서 하나만 살리고 데이터를 불러오자

그 때 사용하는것이 map() Method ~!

map() : 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

내가 아는 그 맵인듯 ㅇㅇ

그럼 만들어보자

이렇게 데이터 안에 객체를 생성해주고

  {
    id:"1",
    title:"공부하기",
    completed: true
  },
  {
    id:"2",
    title:"청소하기",
    completed: false 
  }
]

          {this.todoData.map(data=>(
          <div style={this.getStyle()} key={data.id}>
            <input type="checkbox" defaultChecked={data.completed}></input>
            {data.title}
            <button style={this.btnStyle}>X</button>
          </div>
          ))}

요런식으로 map을 써서 가져오면 된다..!
그런데 이렇게 배열로 가져올때 유니크한 값을 줘야지 돌아간다고 한다.
그 값은key=id로 줬는데 이유는 차차 알아보자

정리한 전체 코드이다

import React, {Component} from "react";  // 리액트 라이브러리에서 컴포넌트 들고오기
import "./App.css";

export default class App extends Component{ // 컴포넌트를 사용할 수 있게 extends

  btnStyle = {
    color : "#fff",
    border : "none",
    padding : "5px 9px",
    borderRadius : "50%",
    cursor : "pointer",
    float : "right",
  }

getStyle = () =>{
  return{
    padding : "10px",
    borderBottom:"1px #ccc dotted",
    textDecoration : "none"
  }
}

todoData=[ //배열안에 객체넣기 
  {
    id:"1",
    title:"공부하기",
    completed: true
  },
  {
    id:"2",
    title:"청소하기",
    completed: false 
  }
]


  render(){ // 변환한다 
    return( // 반환한다 
      // 컨테이너를 감싸고
      <div className="container">
        {/* div박스하나를 만든다. 투두블락 */}
        <div className="todoBlock">
          {/* 그리고 제목박스도  */}
          <div className="title">
            My To do List 
          </div>
          {/* 밑에서부터 할일 목록을 나열한다 */}
          {/* 반복형으로 나열 */}
          {this.todoData.map(data=>(
            // this는 클래스를 가리키고 클래스 안에 todoData라는 리스트객체를 가지고 와서 그 안에 데이터를 꺼내는데 map함수를 써서 꺼낸다
            // map은 객체별 요소를 data라는 변수로 정해주고 data객체 안에 id,completed,title을 가져온다
            // style같은경우도 겹치는 경우가 많으니 this를 사용해서 클래스 내에 만들어둔 스타일을 가지고 와서 사용한다
            // react에서는 반복되는 값들을 가지고올때 유니크한 값와 같은 key값을 줘야한다 
            <div style={this.getStyle()} key={data.id}>
              <input type="checkbox" defaultChecked={data.completed}></input>
              {data.title}
              <button style={this.btnStyle}>X</button>
            </div>
          ))}
        </div>

      </div>
    )
  }
}