[React] 인프런 강의 [따라하며 배우는 리액트] Section 1~2

Section 1 : 리액트 기본

리액트의 장점
- 리액트는 라이브러리 (프레임워크 : Angular, Vue.js)
- 라이브러리특성상 프레임워크에 비해 가벼움
- 가상 DOM 사용
  - View구성이 Component화 되어있어 수정된 부분만 렌더링됨 : 가상DOM끼리 비교하여 바뀐부분 발견 및 적용
  - 전체를 렌더링해도 되지 않아 매우 효율적이고 유연함
리액트의 단점
- 필요한 모듈이 있는경우 직접 설치해야함
- 버전이 계속 업데이트되기때문에 기존에 가능했던 기능이 이후에 지원이 안되는 경우있음
  - 버전6으로 업그레이드 : useHistory → useNavigate
- 지속적인 공부 필요
리액트 명령어

# 리액트 파일만들기
npx create-react-app {원하는 파일}

# 리액트 실행
npm run start

Section 2 : Todo앱 만들기

JSX : 자바스크립트의 확장 문법
- Javascript + HTML
- 리액트를 사용하는 대부분의 사람들이 사용함
- Element(Component의 객체)를 쉽게 사용하기 위해 사용
- 주의해야 하는 문법
  - Component내에 여러 Element가 있으면 하나의 부모로 묶어줘야 한다.
```
function hello() {
	return (
	// 안녕하세요라는 element와 반갑습니다라는 element를 하나의 부모로 묶어줘야한다
		<div>
			<div> 안녕하세요 </div>
			<div> 반갑습니다 </div>
		</div>
	)
}
```
  - 리스트에 존재하는 Child는 반드시 unique한 key가 있어야 한다.

To-Do 앱 만들기

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%);
}

App.js

import React, {Component} from "react";
import "./App.css";
export default class App extends Component {

  state = {
    todoData : [],
    value: "",
  }

  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",
    }
  }

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

  handleChange = (e) => {
    console.log('e', e.target.value)
    this.setState({ value: e.target.value })
  }

  handleSubmit = (e) => {
    e.preventDefault();

    // 새로운 할 일 데이터
    let newTodo = {
      id: Date.now(),
      title: this.state.value,
      completed: false,
    };

    // 원래 있던 할 일에 새로운 할 일 더해주기
		// 전개 연산자 사용
    this.setState({ todoData: [...this.state.todoData, newTodo], 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>
      {this.state.todoData.map((data) => (
          <div style={this.getStyle(data.completed)} key={data.id}>
            <input type="checkbox" defaultChecked={false} onChange={() => this.handleCompleteChange(data.id)} />
            {data.title}
            <button style={this.btnStyle} onClick={() => this.handleClick(data.id)}>x</button>
          </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.handleChange}
          />
          <input
            type="submit"
            value="입력"
            className="btn"
            style ={{ flex: '1'}}
          />
        </form>

        </div>
      </div>
    )
  }
}

Filter 메소드
- 주어진 함수의 조건을 통과하는 경우만 포함

// filter에서 data.id와 id가 다른경우만 포함되므로 같은경우는 지워진다  
handleClick = (id) => {
    let newTodoData = this.state.todoData.filter(data => data.id !== id)
    console.log('newTodoData', newTodoData)
    this.setState({todoData: newTodoData})
  }

setState
- 주어진 코드의 handle과 관련된 대부분의 메소드에 등장
- setState()는 컴포넌트의 state 객체에 대해 업데이트, 변경시 컴포넌트가 리렌더링