TIL 12.12

todo list 만들기

app.jsx 뼈대 잡기

return에 필요한 부분부터 써보고 길어지는 것을 하나하나 components로 만들어서 빼준다.
여기에선 Header, Input, TodoList컴포넌트를 조합했다.

import React from 'react';
import { useState } from 'react';
import Header from './components/Header';
import Input from './components/Input';
import { v4 as uuidv4 } from 'uuid';
import TodoList from './components/TodoList';

<컴포넌트들은 위에서 import 해주는 것 잊지말기>

const App = () => {
  const [todos, setTodos] = useState(initialState);

  return (
    <div>
      <Header>헤더입니다</Header>
      <main
        style={{
          padding: '20px',
          backgroundColor: '#fcc2e9',
        }}
      >
        <Input setTodos={setTodos} />

        {/* todo-list 출력 */}
        <TodoList isActive={true} todos={todos} setTodos={setTodos} />
        <TodoList isActive={false} todos={todos} setTodos={setTodos} />
      </main>
      <footer>푸터입니다.</footer>
    </div>
  );
};

export default App;

<최상위 컴포넌트인 App도 잊지말고 export>

각 컴포넌트 작성

못 만든 Footer 컴포넌트부터 작성해본다.

import React from 'react';

function Footer({ children }) {
  return <footer>{children}</footer>;
}

export default Footer;

초기화 설정과 사용자 제어

입력창에 입력하고 추가하기 버튼을 누르면 그 내용이 추가되면서 입력창은 새로 비워져야 한다.
추가하기 버튼을 누를 때 일어나야 하므로 Input 컴포넌트속 버튼에 적용된 onSubmit함수를 수정해주어야 한다.

return (
    <section>
      <form onSubmit={handleSubmitClick}>
        제목 : <input value={title} onChange={handleTitleChange} />
        내용 : <input value={contents} onChange={handleContentsChange} />
        <button>추가</button>
      </form>
    </section>
  );

<뭐든지 return문부터 보고 할 일을 정하는 것이 좋다>

const handleSubmitClick = (event) => {
    event.preventDefault();
    console.log('here!');

    setTitle('');
    setContents('');

    if (title === '') {
      alert('제목을 입력해주세요.');
      return;
    }
    if (contents === '') {
      alert('내용을 입력해주세요.');
      return;
    }