React : to Do List 만들기

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.

to Do List

버튼을 클릭했을 때 state가 전달되는 form을 만들었다.

import { useState } from 'react';

function App() {
  const [value, setValue] = useState('');
  const onChange = (e) => {
    setValue(e.target.value);
  };
  const onSubmit = (e) => {
    e.preventDefault();
    setValue('');
    console.log('뚜두뚜두', value);
  };
  return (
    <div>
      <h1>나의 뚜두뚜두</h1>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="투두리스트"
          value={value}
          onChange={onChange}
        ></input>
        <button>투두 더하기</button>
      </form>
    </div>
  );
}
export default App;

onSubmit함수 안에서 단순히 setValue만 실행하는 것이 아니라, List(Array)에 추가까지 하고싶다.

//초기값이 빈배열인 setState 생성
const [valueList, setValueList] = useState([]);
const onSubmit = (e) => {
  e.preventDefault();
  if (value === '') {
    return;
  }
  setValue('');

  //배열을 리턴해주는 setState
  setValueList((currentArray) => [
    value,
    ...currentArray,
  ]);
};
 console.log('valueList', valueList);

javaScript에서는 Array.push()를 사용했으나 react에서는 useState의 함수를 사용한다.

//setValueList((현재값) => [
setValueList((currentArray) => [
  //state
  value,
  // 스프레드연산자로 작성된 현재값
  ...currentArray,
]);

만들어진 배열을 리스트 형식으로 화면에 보여주기까지 한다면,

<div>
  //리스트 갯수 출력
  <h1>나의 뚜두뚜두({valueList.length})</h1>
  <form onSubmit={onSubmit}>
    <input
      type="text"
      placeholder="투두리스트"
      value={value}
      onChange={onChange}
      ></input>
    <button>투두 더하기</button>
  </form>
  <hr />
  <ul>
    //javaScript map()을 이용하여 값 변환
    {valueList.map((item, index) => (
      //리액트에서 map()을 사용할 때 key가 필요하다.
      <li key={index}>{item}</li>
    ))}
  </ul>
</div>

결과

전체코드

import { useState } from 'react';

function App() {
  const [value, setValue] = useState('');
  const [valueList, setValueList] = useState([]);
  const onChange = (e) => {
    setValue(e.target.value);
  };
  const onSubmit = (e) => {
    e.preventDefault();
    if (value === '') {
      return;
    }
    setValue('');
    setValueList((currentArray) => [
      value,
      ...currentArray,
    ]);
  };
  return (
    <div>
      <h1>나의 뚜두뚜두({valueList.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="투두리스트"
          value={value}
          onChange={onChange}
        ></input>
        <button>투두 더하기</button>
      </form>
      <hr />
      <ul>
        {valueList.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}
export default App;