리액트로 todo list 만들기 1

리액트로 투두리스트 만들기!

 

킹갓제네럴⭐️⭐️님 덕분애... 대충 짰읍니다.

 

먼저 App.jsx 하나에 적었는데

 

먼저 화면에 띄워줄 것들을 작성한다.  html로 치면 뼈대 작성.

 

function App () {
  return ()
}

여기 안에 작성해주면 되는데

return 윗부분에는 함수를,

return 안에는 html 뼈대를 만든다.

 

나는 헤더를 분리했다.

const Header = () => {
  return (
    <div className="title">
      <span>My Todo List</span>
      <span>React</span>
    </div>
  );
};

export default Header;

이런 식으로!!

 

그 다음이 todo를 입력하는 폼을 만들어줬는데

역시 분리했다.

import React from 'react';

function TodoForm({
  title,
  contents,
  onContentsChange,
  onSubmit,
  onTitleChange,
}) {
  return (
    <form className="addTodo" onSubmit={onSubmit}> 
      <input
        type="text"
        className="inputTitle"
        placeholder="제목"
        value={title}
        onChange={onTitleChange}
      />
      <input
        type="text"
        className="inputContents"
        placeholder="내용"
        value={contents}
        onChange={onContentsChange}
      />

      <button className="addBtn">추가하기</button>
    </form>
  );
}

export default TodoForm;

이렇게 분리하고, 

 

app.jsx에

<TodoForm
          title={title}
          contents={contents}
          onTitleChange={onTitleChange}
          onContentsChange={onContentsChange}
          onSubmit={onSubmit}
        />

이렇게 연결해주면 된다.

 

코드를 다 작성한 것도, 완전히 이해한 것도 아니라서

일단 여기까지만 작성하고 좀 더 공부해보는 것으로...