[Wecode] TIL_Day2 CodeKata | React To-Do List

TIL 2일차

10:30 | Code Kata
11:00 | React To-Do List Tutorial

Code Kata

숫자인 num을 인자로 넘겨주면, 뒤집은 모양이 num과 똑같은지 여부를 반환해주세요.

num: 숫자
return: true or false (뒤집은 모양이 num와 똑같은지 여부)


예를 들어,
num = 123
return false 
=> 뒤집은 모양이 321 이기 때문

num = 1221
return true 
=> 뒤집은 모양이 1221 이기 때문

num = -121
return false 
=> 뒤집은 모양이 121- 이기 때문

num = 10
return false 
=> 뒤집은 모양이 01 이기 때문

내 코드

React To-Do-List Tutorial

배운 내용

To-Do List 추가
To-Do List 삭제
PropTypes
Route
HTTP Request - axios

React 개발할 때 필수 extension

ES7 React/Redux/GraphQL/React-Native snippets 단축키로 컴포넌트를 만들 수 있게 해준다.
ex) rce를 타이핑하면 아래 코드가 자동완성된다.

import React, { Component } from 'react'

export class Test extends Component {
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

export default Test

snippet 단축키 모음

PropTypes

PropTypes는 타입 체크를 위해서 사용되는 라이브러리다.
PropTypes를 사용해서 React 컴포넌트의 prop에 대한 타입 정의와 기본값 설정을 할 수 있다.
PropTypes는 react 패키지에 기본적으로 내장되어 있기 때문에 별도로 설치할 필요가 없다.

아래와 코드는 prop으로 todos, markComplete, delTodo를 받아서 propTypes로 정의해준 코드다.

import React, { Component } from 'react';
import TodoItem from './TodoItem';
import PropTypes from 'prop-types';

class Todos extends Component {

  render() {
    return this.props.todos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} markComplete={this.props.markComplete} delTodo = {this.props.delTodo}
        />
    ));
  }  
}

// PropTypes
// isRequired 키워드를 사용하면 반드시 입력되어야 하는 필수 prop으로 정의된다.
Todos.propTypes = {
    todos: PropTypes.array.isRequired,
    markComplete: PropTypes.func.isRequired,
    delTodo: PropTypes.func.isRequired
}

export default Todos;

HTTP Request - axios

React 자체에는 http요청을 하는 모듈이 포함되어 있지 않다.
React.js는 State에 따른 View 표현에만 집중하는 라이브러리이기 때문에 그 외 기능들은 다른 라이브러리를 개발자가 스스로 골라서 사용해야 한다.
http요청은 jQuery.ajax를 사용해도 되고 axios같은 http지원 라이브러리를 사용해도 된다.
가장 보편적으로 사용되는 라이브러리는 axios다.

axios는 get, post, patch, put, delete 등의 메소드로 서버와 통신할 수 있다.

ex) get, post, delete

// get
axios.get('https://jsonplaceholder.typicode.com/todos?_limit=10')
  .then(res => this.setState({ todos: res.data }))

// post
axios.post('https://jsonplaceholder.typicode.com/todos', {
  title, // title: title
  completed: false
})
  .then(res => {
    this.setState({ todos: [...this.state.todos, res.data] })
  });

// delete
axios.delete(`https://jsonplaceholder.typicode.com/todos/${id}`)
  .then(res => {
    this.setState({
    todos: [...this.state.todos.filter(todo => todo.id !== id)] 
  })});

React.Fragment

아무 기능도 하지 않는 태그
react는 최상위 태그가 단일 태그여야 하는데 div로 감싸기 싫을 때 사용한다.

<React.Fragment>
  <AddTodo addTodo={this.addTodo} />
  <Todos todos={this.state.todos} markComplete={this.markComplete} delTodo={this.delTodo}/>
</React.Fragment>

Published 14 Feb 2020

안녕하세요