[React] Todo list 만들어보기

App.js

import { useState } from 'react';
import './App.css';

function App() {
  //[변수, 변수를 바꾸는 함수]
  //새로운 state 변수를 선언하고, val이라고 부르겠습니다
  //useState 안에 들어가는 건 변수의 초기값
  const [val, setValue] = useState('');
  //새로운 state 변수를 선언하고, state 라고 부르겠습니다
  const [state, setState] = useState([]);

  function handleOnKeyPress(e) {
    if (e.key === 'Enter') {
      handleOnSubmit();
    }
  }

  function handleOnSubmit() {
    //setState
    setState([val,...state]);
    //setValue
    setValue('');
  }

  function handleOnChange(e) {
    //setValue
    setValue(e.target.value);
  }

  function handleRemove(idx) {
    //setState(spread, slice)
    setState(
      [...state.slice(0,idx),...state.slice(idx+1)]
  );
}

return (
  <div className='App'>
    <input
      value={val}
      onChange={handleOnChange}
      onKeyPress={handleOnKeyPress}
    />
    <button type='submit' onClick={handleOnSubmit}>
      등록하기
    </button>
    {state.map((e, idx) => (
      <div key={idx}>
        <span>{e}</span>
        &nbsp;
        <button onClick={() => handleRemove(idx)}>제거</button> 
      </div>
    ))}
  </div>
);
}

export default App;

하도 오류떠서 학회선배한테 여쭈어봤는데 잘못한 것 두가지 찾았다.

일단 handOnChange 함수에서 e.target.value를 e.value로 썼던것.

target까지 써야 이벤트 객체에 담긴 값을 불러올 수 있다고 한다.

​

그리고 handleOnRemove 함수 쓸 때에

...state.slice(0,idx),...state.slice(idx+1)

여기에다가 [ ] 를 안씌워 줬었다.

사실 지금 개념, 문법을 제대로 아는게 아니라

검색 엄청 하면서 끼워맞추기 식으로 느낌대로 ㅋㅋㅋ한것도 있긴한데

아 그래도 엄청 뿌듯한걸,,!!! 내일 제대로 학회 세미나 시간에 설명 들어야지.

미루지 말고 그날그날 개념좀 정리하자

나중에 정리하다가 고생하지 말고! 까먹잖아

 

https://byseop.netlify.app/react-todolist02/

React - 리액트 예제 To Do List 실습편 -2- - BYSEOP's devlog

이건 검색하면서 그나마 비슷해보여서 참고 했었다.