할일 목록 만들기 및 삭제 기능

SPA(Single Page Application)이란 ?

웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현

• 사실 템플릿은 한개!
• HTML5의 History API를 사용하여 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해줌
  • React-Router-Dom사용
  • History API
    • history.back, history.forward, history.go …

// public/index.html
<div id="root"></div>

// src/index.js
ReactDOM.render(
<React.StrictMode>
	<App />
</React.StrictMode>
document.getElementById('root');
)

root id를 가진 div엘리먼트를 잡아 그 안에서 화면 꾸밈

📂 참조

History API - Web APIs | MDN

JSX(javascipt syntax extension)란 ?

• 자바스크립트의 확장 문법
• 리액트에서는 jsx를 이용해 화면에서 ui가 보이는 모습을 나타냄
• 자바스크립트(logic)와 html구조(markup)을 같이 사용할 수 있기 때문에 ui 데이터가 변하는 것이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현 가능
• createElement를 쉽게 사용가능 (바벨이 createElement로 바꿔줌)

주의 문법 규칙

1. 컴포넌트에 여러 엘리먼트 요소가 있다면 반드시 부모요소 하나로 감싸줘야함
2. 클래스는 className으로

할일 목록 만들기

1. 원래 있던 부분 지우기 (App.js, App.css, index.css)

   함수형 컴포넌트 → render매소드 필요 없음 바로 return

   클래스형 컴포넌트 → render필요

2. ui만들기 (jsx, css)

   스타일 적용

   • 클래스 내에 객체, 함수로 스타일 지정
   • css파일 Import해서 지정

3. 데이터 만들기

map함수 이용

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

map함수 이용 key unique한 값으로 필수임!

JSX에서 key속성이란 ?

리액트가 변경, 추가 또는 제거된 항목을 시별하는데 도움이 됨

요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야함

💡 리액트는 가상돔을 이용해서 바뀐 부분만 실제 돔에 적용! → key를 이용하여 어떤 부분이 바뀌었는지 인식할 수 있음

유니크한 값을 키로 넣어주어야 하지만, 없다며 index를 사용하기도 함 (그러나 인덱스는 순서가 바뀌면 변경 됨으로 비추천)

1. 할일 목록 지우기 (filter이용)

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

<button style={this.btnStyle} onClick={() => this.handleClick(data.id)}>x</button>

리액트 State란 ?

리액트에서 데이터가 변할 때 화면을 다시 렌더링 해주기 위해서는 react state를 사용해야 함

컴포넌트의 렌더링 결과물에 영향을 주느 데이터를 갖고 있는 객체

state가 변경되면 컴포넌트는 리랜더링됨.

state는 컴포너트 안에서 관리됨

this.setState → 상태 업데이트

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

회사에서 일하면서 vue를 좀 더 이해하게 되긴했나보다 vue랑 다른점들이 재밌고 vue에선 이렇게 썼는데 이런 생각들이 드는게 신기하당