[ToDoList] 할 일 등록하기

Mark·2022년 8월 20일

할 일 등록하기

input 상태 관리

리액트에서 input 태그의 상태를 관리하는 방법

이벤트에 등록하는 함수에서는 ‘e’를 파라미터롤 받아와서 사용한다.
객체의 e.target은 이벤트가 발생한 DOM인 input DOM을 가르킨다.
DOM의 value 값(e.target.value)를 조회 시, 현재 input에 발생한 값을 알 수 있다.
input의 상태를 관리할 때는 input 태그의 value 값도 설정해주어야 상태가 바뀌었을 때, input의 내용도 업데이트 된다.


import React, { useState } from 'react';   // useState 사용

function InputTest() {
  const [text, setText] = useState('');

  const onChange = (e) => { // 'e'를 파라미터로 받아옴 
    setText(e.target.value); // e.target.value로 현재 input에서 발생한 값으로 setText 변경시켜줌
  };

  const onReset = () => {
    setText('');
  };

  return (
    <div>
			<!--value 값을 설정해서 상태가 바뀌었을 때, input의 내용도 업데이트 시켜줌 -->
      <input onChange={onChange} value={text}  />  
      <button onClick={onReset}>초기화</button>
      <div>
        <b>{text}</b>
      </div>
    </div>
  );
}

export default InputTest;

여러개의 input 처리하기

1) 문자열들을 객체 형태로 관리

input의 개수가 여러개 일때는 input에 name을 설정하고 이벤트가 발생했을 때 값을 참조하는 것이 좋은 방법이다. useState 에서는 문자열이 아니라 객체 형태의 상태 관리를 해주어야 한다.

// 객체 형태로 두 input 태그의 name 속성값을 초기화 
// 사용할 문자열들을 저장하는 객체 형태로 관리
  const [ inputs, setInputs ] = useState({
    title: '',
    content: '',
    isDone: false
  });

여러 개의 문자열을 가지고 있는 객체 형태로 관리시켜줄 수 있다.
이 값들은 inputs 안에 들어가게 된다.

2) 비구조화 할당

todo list에서 사용할 title, content, isDone을 쉽게 사용하도록 비구조화 할당을 통해 값을 추출시켜 준다.

const { title, content, isDone } = inputs;

3) 객체 수정

리액트에서는 객체를 수정할 때 inputs[title] = value; 이런식으로 직접 수정하면 안된다.
직접 수정하면 안되는 이유는 불변성을 지켜줘야 하기 때문!!
- 불변성을 지켜주지 않으면 값이 바뀌기 이전 상태와 이후 상태를 비교할 수 없기 때문에 상태가 업데이트 됐음을 감지할 수 없게 된다. 즉, 직접 값을 바꾸면 리렌더링(업데이트) 되지 않는다!!
spread 문법을 사용해서 새로운 객체를 만들고 새로운 객체에 변화를 주자! (불변성을 지키는 방법)
아래 코드는 input값의 변화를 감지해서 객체의 변화를 주는 코드이다.
name 속성 : input이 여러개이면 어떤 값이 변경되었는지 확인할 수 있는 속성 (name 속성이 없으면 확인이 불가능하다.)
setInputs : spread 문법(…) 을 사용하여 inputs의 현재 값을 넣어주고 [name] : value로 키 값이 name에 해당하는 곳에 value를 넣어준다.
setInputs : spread 문법을 사용하여 기존 객체(inputs)의 객체들을 가져온 뒤, [name]을 이용하여 객체를 수정해준다. (대괄호를 이용하여 객체 수정)

const onChangeHandler = (event) => {
    const { name, value } = event.target; //event.target에서 name과 value 추출 
		console.log("name", name); // name은 input 태그의 name을 가져옴 
    console.log("value", value); // value는 input 태그에서 입력되고 있는 value 값을 가져옴
		console.log("name:" , name , " [name]:" , [name], " value:", value); //name: title  [name]: ['title']  value: "내가 입력하고 있는 값" 

    setInputs({
      ...inputs, // 기존 inputs 객체 복사 -> 새로운 객체 생성 
      [name]: value // name 키를 가진 값을 value로 변경 
    });
  };

4) 값 등록하기

input에서 작성한 값을 todo 라는 객체에 등록시켜줘야 한다.

객체 배열 넣기 : 여러 개의 객체가 존재하기 때문에 배열 안에 객체들을 넣어주고 관리한다.

const [ todos, setTodos ] = useState([ // 초기값 설정
    {
      id: 1,
      title : "할 일1",
      content: "content1",
      isDone: true
    },
    {
      id: 2,
      title : "할 일2",
      content: "content2",
      isDone: false
    }
  ]); // 객체 배열 넣기

등록버튼을 클릭하면 input태그에 작성한 값이 등록되어야 함
onClickHandler라는 함수를 생성
setTodos에 새로운 값을 넣어준다.
- …todos : 불변성을 지키기 위해 spread 문법을 사용하여 객체를 복사한다.
- {id : todos.length+1, …..} : 추출한 값들을 넣어준다.
input 초기화는 todo를 등록하고 나서 input 상태를 초기화시켜주기 위해 설정한 것.

const onClickHandler = () => {
    // todo 새로운 값 등록 
    setTodos([...todos, {id: todos.length+1, title: title, content: content, isDone: isDone}])
    // input 초기화
    setInputs({
      title: '',
      content: '',
    })
  }

5) 함수와 값 넘겨주기

CreateTodo.jsx 파일에 함수와 값들을 인자로 넘겨준다.

return (
    <div className="">
      <CreateTodo 
        title={title}
        content={content}
        onChange={onChangeHandler}
        onCreate={onClickHandler}
        />
    </div>
  );

6) CreateTodo.jsx에서 값 받기

title, content, onChange, onCreate를 인자로 받아서 화면에 렌더링시켜준다.

function CreateTodo({ title, content, onChange, onCreate }) {
  return (
    <div className='create'>
      <div className='container'>
        <span className='span'>제목</span>
        <input
          className='input'
          name="title"
          placeholder="제목"
          onChange={onChange}
          value={title}
        />
      </div>
    </div>
  );
}