2. map()을 사용해서 TodoList

 

todoList 작동

 

 

 이번에는 리액트를 사용해 TodoList를 만들었습니다. 확실히 전에 Javascript로 만들었던 때와 코드 라인 수 자체가 적고 간편하게 만들 수 있더라고요. 이래서 다들 리액트 리액트 하시나 봐요. 이번 기회에 조금 확실히 알게 되었습니다. useEffect를 사용한 줄 알고 포스팅을 해야겠다! 하고 적기 시작했는데 안 썼네요... 머쓱. 그래도 옛날에 CRUD 게시판을 만들 때 map() 함수 때문에 아주 개고생을 했던 경험이 있기 때문에, 이를 한 번 적어보도록 하겠습니다. 

 

 

1. map?

 

 코딩이나 프로그래밍을 해보셨다면 많이 들어보거나 써보셨을 기능이죠. 특히 코딩테스트 준비로 백준이나 등등 문제 풀이에서는 절대 빠질 수 없는 개념입니다. 우선 그동안의 map의 개념이 무엇인지 보자면

 

• 값을 저장할 수 있는 자료구조
• key, value로 구성되어 있음
• key를 사용해서 정렬 및 저장하기 때문에 중복이 없고 검색의 시간이 빠름

 

 입니다. 이에 관한 문제 풀이도 한 번 올린 적이 있습니다. 문제나 알고리즘을 통해 이해하시고 싶으신 분께서는 이쪽으로.

https://minjh1126.tistory.com/40

[백준 1620] 포켓몬 마스터 이다솜 [C++]

 

 

 그런데 웹/앱을 프로그래밍 하는 리액트에서는 무슨 차이인가? 하면 기본적인 개념은 비슷합니다. 특히 <key, value>로 구성되어 있다는 점이요. 하지만 이곳에 자료를 저장하지는 않습니다. 배열에 저장해서 사용합니다. 대신 이 함수를 사용해서 key값에 맞춰 value를 지정할 수 있죠. 저는 두 번 사용해 봤는데 둘 다 출력에 사용했습니다. 게시글이나 Todo List를 출력하는 것처럼요. 리액트에서는 대다수 이렇게 사용하시는 것 같았어요. 차례대로 배열에 저장되어 있는 걸 나열하고, 또 하나 추가되거나 삭제되면 바로 렌더링 할 수 있는 곳에 사용되는 것 같습니다. 기본적으로 문법은

 

{배열이름.map((매개변수) => 함수)}

// 예시
{todos.map((e, index) => <li key={index}>{index}: {e}</li>)}

 

 

 이렇게 사용됩니다. 이런 식으로 map에게 배열을 주면, 그 배열의 원소 순서대로 함수를 수행합니다. => 뒤의 부분을 하나하나 차례대로 실행해줍니다. 이렇게 html 태그를 사용해 주면 그 html 태그로 출력해 줍니다. map의 경우에는 key, value 형식이기 때문에 key를 지정해줘야 합니다. key는 무조건 고유한 값이어야 합니다. 잘 모르겠는데 싶으시면 안 적어주셔도 되지만, 경고가 발생합니다. 이 부분이 신경 쓰이는데, key 값에는 뭘 넣어야 할지 모르겠다? 하시면 놀라운 사실! map의 두 번째 매개변수로 배열의 인덱스 값을 줍니다. 그래서 이 부분을 key 값으로 무난하게 사용할 수 있어요.

 

 

2. 구현

 

 자세한 설명은 코드와 함께 하도록 하겠습니다.

 

import { useState } from 'react';	// 리액트의 useState 사용
import './App.css';	

function App() {
  const [todo, setTodo] = useState('');	// todo의 내용
  const [todos, setTodos] = useState([]);	// todo들이 담긴 배열
  const onChange = (e) => setTodo(e.target.value);	// input의 내용이 바뀌면 todo에 저장
  const onSubmit = (e) => {	// todo가 제출되면
    e.preventDefault();
    if(e === ""){	// 빈 값일시 아무 행동하지 않음
      return;
    }
    else{	// 빈 값이 아니라면
      setTodo(e);	// todo에 그 값을 넣어줌
      
      // 변수, ...배열 -> 배열에 그 값을 추가해줍니다. 아주 간편해요! 
      setTodos(() => [todo, ...todos]);	// 기존 todo가 있는 배열에 새 todo 추가
      setTodo("");	// todo 값 초기화
    }
  }
  return (
    <>
    <h1> Todo List </h1>
    <div>
      <form onSubmit={onSubmit}>
        <input type="text" value={todo} onChange={onChange} />	// 입력창
        <button> submit </button>	// 누르면 제출됨
      </form>
    </div>
    <hr />
    {todos.map((e, index) => <li key={index}>{index}: {e}</li>)}	// map으로 todo 리스트 출력
    </>
  );
}

export default App;

 

 

 

 리액트를 열심히 배우고 있는데 생각보다 간단하면서도 어렵네요. 옛날에는 뜻도 모르고 어떻게든 구현을 해놔야 해서 뭔지도 모르고 냅다 적기만 했는데, 이렇게 무슨 뜻인지 알게 되니 그때 그 글들이 무슨 뜻인지 이해가 되기 시작했습니다. 후련한 기분이네요. 앞으로도 이런 후련한 기분을 위해 열심히 하도록 하겠습니다. 화이팅!