Beginner 8회차 2 (8/6) | 양방향 데이터 바인딩과 단방향 데이터 바인딩 예제로 이해하기, Todo 항목 추가하기 실습

양방향 데이터 바인딩과 단방향 데이터 바인딩 예제로 이해하기

Q.
강사님! title={title}와 같은 반응형 데이터는 부모에서 자식 컴포넌트로 속성을 전달할 때 쓰는 단방향 데이터 전달이고
저희가 방금 배운 value={title}처럼 쓰는 건 폼 요소에서 요소의 상태를 제어할 때 사용하는 양방향 데이터 전달이라고 이해했는데 맞을까요?

A. 

 

 

Todo 항목 추가 기능 구현하기

App.tsx

// App.tsx
// todo목록 새로 가지고 오는 함수 내려줌

import TodoCreator from './components/TodoCreator'

<TodoCreator getTodos={getTodos} />

 

todoCreator.tsx

 

 

엔터키 눌렀을 때 새 목록을 가지고 오도록 하는 함수(createTodo) 실행 !

 

 

body에 꼭 들어가야 하는 것이 있는지 API 명세서 확인

--> title 필수 !

API 명세서. title 필수로 넣어줘야 함

 

보낸 데이터와 응답받은 데이터 확인해보기

payload: 전송한 데이터를 볼 수 있음 preview: 서버가 준 데이터(응답받은 데이터)를 볼 수 있음

 

 

디스플레이로 구현되는 부분. onKeyDown일 때 함수를 넣어주기

 

기능 구현 완료

enter 눌렀을 때 추가됨

 

전체 코드

// App.tsx
// todo목록 새로 가지고 오는 함수 내려줌

import TodoCreator from './components/TodoCreator'

<TodoCreator getTodos={getTodos} />

// Todocreator.tsx
import { useState } from 'react'

export default function TodoCreator({ getTodos }: { getTodos: () => void }) {
  const [title, setTitle] = useState('')

  function onKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
    if (event.key === 'Enter') {
      console.log('title:', title)
      createTodo()
    }
  }

  async function createTodo() {
    await fetch(
      `https://asia-northeast3-heropy-api.cloudfunctions.net/api/todos`, // todos/도 가능
      {
        method: 'POST', // 생성
        headers: {
          'content-type': 'application/json',
          apikey: 'KDT9_AHMq2s7n',
          username: 'FE1_ParkSuHyun'
        },
        body: JSON.stringify({
          title // title: title
        })
      }
    )
    getTodos()

  }

  return (
    <div>
      <input
        value={title}
        onChange={e => setTitle(e.target.value)}
        onKeyDown={onKeyDown}
        placeholder="새로운 할 일을 작성하세요"
      />
    </div>
  )
}