[React]리액트로 구현한 간단한 Todo List 투두리스트 만들기

 

 

리액트로 프로젝트를 하기전 CSS를 제외한 React 구현 연습용으로 초간단한 투두리스트를 만들어 보았다

먼저, 무엇을 만들것인지 생각해본다

 

1. 인풋 창이 있고 버튼이 있다
2. 값을 입력하거 추가 버튼을 누르면 아이템이 추가된다
3. 삭제버튼을 누르면 삭제가 가능하다

 

리액트 할 때 중요한 것은 모든 것을 하나 하나 나눠서 컴포넌트화 시키는 것이다

UI 에서 무엇을 컴포넌트화 시킬지 생각해보는것은 주관적이나,

확실한것은 반복되는것을 컴포넌트화 해야한다

리액트의 매력은 바로 재활용이기 때문이다

지금 우리가 해볼 투두리스트에서 반복되는것은 투두리스트의 아이템들이다
TodoItem 이 모여있는 섹션을 투두보드 TodoBoard 라고 컴포넌트화 시키면 될 듯한다

1.인풋창과 버튼 만들기

main 태그 안에 아래의 코드를 입력한다

 

 <input type="text"/>
<button>추가</button>

 

2.인풋창에 입력한 값 읽는 방법

인풋창의 값이 변화할 때마다 알려주는 onChange Event 를 준다
모든 이벤트 핸들러는 객체 형태로 값을 받는다

 

<input type="text" onChange={(event)=>console.log(event.target.value)}/>

 

인풋창에 변화가 생기면 콘솔로그에 나타날 것이다

 

이렇게

 

인풋창에 텍스트를 입력하고 지우자, 오른쪽 콘솔로그 창에 그대로 이벤트가 출력된다

이 값을 저장햇다가 나중에 아이템으로 저장하면 된다

 

저장하기 위해서는 state 를 사용한다

state를 호출해보자

 

const [inputValue, setInputValue] = useState('');

 

초기값은 비어있는 문자열이다

 

inputValue 값을 input 에 넣어주고 이제 콘솔로그 자리에 인풋값을 넣어준다

 

<input
    value={inputValue}
    type="text"
    onChange={(event) => console.log(event.target.value)}
/>

 

3.버튼을 클릭하면! 호출할 함수 만들기

버튼에 onClick 이벤트를 준다

 

<button onClick={addItem}>

 

클릭을 했으니 이제 아이템을 추가하자

addItem 이라는 함수도 만들어 준다

 

어디다?! 우리가 이런 데이터들을 모아두려면

어떤 데이터 타입이 제일 어울릴까?

바로, 배열이다!

 

또다시 state를 만든다

 

const [todoList, setTodoList] = useState([]);

 

useState의 타입은 이번엔 빈문자열이 아니라 배열 [ ] 이다

 

setTodoList([...todoList,inputValue])

 

... 으로 기존의 리스트들은 보존하고 새로운 인풋밸류를 가져오게한다

 

이제 이 아이템을 보여줄 투두 보드,

4. 컴포넌트를 만들자

components 폴더를 만든 뒤 TodoBoard.jsx 파일을 생성한다

 

import React from "react";

function TodoBoard() {
  return (
    <div>
      <h1>Todo List</h1>
    </div>
  );
}
export default TodoBoard;

 

이렇게 만든 컴포넌트를 App.js 파일에서 불러온다

 

import React, { useState } from "react";
import "./App.css";
import TodoBoard from "./components/TodoBoard";

function App() {
  const [inputValue, setInputValue] = useState("");
  const [todoList, setTodoList] = useState([]);
  const addItem = () => {
    setTodoList([...todoList, inputValue]);
  };

  return (
    <main>
      <input
        value={inputValue}
        type="text"
        onChange={(event) => console.log(event.target.value)}
      />
      <button onClick={addItem}>Add</button>
      <TodoBoard />
    </main>
  );
}

export default App;

 

투두보드안에 투두아이템 컴포넌트가 오게 해야한다

 

투두 아이템 컴포넌트도 만들자

 

import React from "react";

function TodoItem() {

    return (
        <div>
            리액트 공부
        </div>
    )
}

export default TodoItem

 

5. 스타일도 살짝 넣어준다

 

App.css에 가서 투두 아이템을 냅다 꾸며준다

 

.todo-item{
    width: 300px;
    height: 50px;
    border: 1px solid lightblue;
}

 

투두아이템을 클래스 네임으로 넣어준다

(클래스는 클래스 네임으로 사용한다)

 

import React from "react";

function TodoItem() {
  return <div className="todo-item">리액트 공부</div>;
}

export default TodoItem;

 

끝

 

이 아니고 투두리스트에 저장된 아이템들은 어떻게 보여줄 수 있을까?

App.js가 가지고 있는 todoList를 어떻게 Todo Board에 전달하느냐?

 

Props를 사용한다

 

TodoBoard.jsx에 props를 주고

function TodoBoard(props) {

App.js에서도 props를 사용해 투두 보드는 불러온다

<TodoBoard todoList={TodoBoard}/>

 

6. 할일 리스트 보여주기

 

import React from "react";
import TodoItem from "./TodoItem";

function TodoBoard(props) {
  return (
    <div>
      <h1>Todo List</h1>
      {props.todoList.map((item) => (
        <TodoItem item={item} />
      ))}
    </div>
  );
}
export default TodoBoard;

어레이 함수로 받아온다

 

import React from "react";

function TodoItem(rpops) {
  return <div className="todo-item">{props.item}</div>;
}

export default TodoItem;

출처 : 코알누(코딩알려주는누나)님의 리액트로 할일앱 만들기 유튜브 영상을 보고 공부했다