마카로닉스

2013 No

React(Nextjs) 따라하며 배우는 리액트 A-Z - 2.간단한 To-Do 앱 만들며 리액트 익히기(To-Do 앱 소개 및 JSX, To-Do 앱 만들기 ,할 일 목록 UI 만들기(JSX, CSS 작성),Map 메소드를 사용한 할 일,React State 란?,전개 연산자(Spread Operator) )

2023-01-26 15:14:32 By 라이트 0 351 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

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

[프론트엔드, 웹 개발] 강의입니다.

이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.

✍️
이런 걸
배워요!

리액트

NextJS

타입스크립트

정적 사이트 자동 배포

도커

강의: https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8#

강의 자료 : https://github.com/braverokmc79/DiagramPDF

소스: https://github.dev/braverokmc79/react-todo-app

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

1.Create React App으로 실행된 리액트의 기본 구조 살펴보기

강의:

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/119839?tab=curriculum

2.React App 실행해보기

강의:

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/119840?tab=curriculum

3.SPA 란?

강의: https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/119841?tab=curriculum

4.To-Do 앱 소개 및 JSX 알아보기

강의: https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/119842?tab=curriculum

5.To-Do 앱 만들기 시작

강의: https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/119843?tab=curriculum

App.js

import React, { Component, component } from "react";
import "./App.css";

export default class App extends Component {

  render() {
    return (

할일 목록

) } }

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

강의:

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/119844?tab=curriculum

App.js

import React, { Component, component } from "react";
import "./App.css";

export default class App extends Component {

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

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

    }
  }

  render() {
    return (

할일 목록

공부하기x

) } }

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

강의:

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/119845?tab=curriculum

App.js

import React, { Component } from "react";
import "./App.css";

export default class App extends Component {

  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: false,
  },
  {
    id: "2",
    title: "청소하기",
    completed: true
  }
  ]
  render() {
    return (

할일 목록

{this.todoData.map(data => { return (

{data.title}x

) })}

) } }

8.JSX Key 속성 이해하기

강의:

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/119846?tab=curriculum

9.Filter 메소드를 사용해서 할 일 목록 지우기

강의:

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/119847?tab=curriculum

App.js

import React, { Component } from "react";
import "./App.css";

export default class App extends Component {

  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: false,
  },
  {
    id: "2",
    title: "청소하기",
    completed: true
  }
  ]

  handleClick = (id) => {
    let newTodoData = this.todoData.filter(data => data.id !== id);
    console.log(" newTodoData : ", newTodoData);
  }


  render() {
    return (

할일 목록

{this.todoData.map(data => { return (

{data.title}this.handleClick(data.id)}>x

) })}

) } }

10.React State 란?

강의:

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/119848?tab=curriculum

App.js

~

  state = {

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

    value: ""
  }


  handleClick = (id) => {
    let newTodoData = this.state.todoData.filter(data => data.id !== id);
    console.log(" newTodoData : ", newTodoData);
    this.setState({ todoData: newTodoData });
  }


~

11.할일 목록 추가하기

강의 :

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/119849?tab=curriculum

12.전개 연산자

강의: https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/119850?tab=curriculum

13.마무리 된 일 표시하기(조건부 삼항 연산자)

강의: https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/119851?tab=curriculum

App.js

import React, { Component } from "react";
import "./App.css";

export default class App extends Component {

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

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

    }
  }

  state = {

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

    value: ""
  }


  handleClick = (id) => {
    let newTodoData = this.state.todoData.filter(data => data.id !== id);
    console.log(" newTodoData : ", newTodoData);
    this.setState({ todoData: newTodoData });
  }

  handleChnage = (e) => {
    console.log(" e  :", e.target.value);
    this.setState({ value: e.target.value })
  }

  handleSubmit = (e) => {
    e.preventDefault();
    let newTodoData = {
      id: Date.now(),
      title: this.state.value,
      completed: false
    }

    this.setState({ todoData: [...this.state.todoData, newTodoData], value: "" })
  }


  handleCompleteChange = (id) => {
    let newTodoData = this.state.todoData.map(data => {
      if (data.id === id) {
        data.completed = !data.completed
      }
      return data;
    });

    this.setState({ todoData: newTodoData })
  }

  render() {
    return (
      <div className="container">
        <div className="todoBlock">
          <div className="title">
            <h1>할일 목록</h1>
          </div>

          <form style={{ display: 'flex' }} onSubmit={this.handleSubmit}>
            <input
              type="text"
              name="value"
              style={{ flex: "10", padding: "5px" }}
              placeholder="해야 할일을 입력 하세요."
              value={this.state.value}
              onChange={this.handleChnage}
            />

            <input
              type="submit"
              name="입력"
              className="btn"
              style={{ flex: '1' }}

            />
          </form>



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

        </div>
      </div >
    )
  }
}