[React-project Todo-app] 일정 추가하기 (useState)

todo-app 헤더에는 제목과 내용을 입력할 수 있는 input이 있고 추가하기 를 클릭하면 리스트를 추가하는 버튼이 있다. 

 

코드

 

html

<div className="input_wrap">
  <div>
    <p>제목 : </p>
    <input
      placeholder="제목을 입력하세요"
      value={titleInput}
      onKeyUp={(e) => {
        if (e.key === "Enter") {
          todoAddHaedler();
        }
      }}
      onChange={titleInputHaedler}
      type="text"
    />
  </div>
  <div>
    <p>내용 : </p>
    <input
      placeholder="내용을 입력하세요"
      value={contentInput}
      onKeyUp={(e) => {
        if (e.key === "Enter") {
          todoAddHaedler();
        }
      }}
      onChange={contentInputHaedler}
      type="text"
    />
  </div>
  <div>
    <Button todoAddHaedler={todoAddHaedler}>추가하기</Button>
  </div>
</div>

 

css

.input_wrap{
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input_wrap > div {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input_wrap > div:nth-child(3){
  width: 20%;
}

.input_wrap > div > p{
  font-size: 1.2rem;
  font-weight: bold;
}

.input_wrap > div > input{
  font-size: 1.2rem;
  margin-left: 2%;
  padding: 1.5%;
  border: 0;
  border-bottom: 1px solid #623400;
  background-color: #f5f5dc;
}
.input_wrap > div > input:focus{
  outline: none;
  border-bottom: 2px solid #623400;
}

.input_wrap > div > button{
  font-size: 1rem;
  padding: 3%;
  border-radius: 5px;
  font-weight: bold;
  color: #623400;
  border: 2px solid #623400;
}
.input_wrap > div > button:hover{
  background-color: #623400;
  color: #f5f5dc;
}

 

 

 

 

리스트 추가하기

 

우선 onChage를 통해 useState로 저장해 주었다.

const [titleInput, setTitleInput] = useState(""); // 타이틀 인풋
const [contentInput, setContentInput] = useState(""); // 컨탠츠 인풋

 /**
   * 제목 인풋 핸들러
   */
  const titleInputHaedler = (event) => {
    setTitleInput(event.target.value);
  };
  /**
   * 컨탠츠 인풋 핸들러
   */
  const contentInputHaedler = (event) => {
    setContentInput(event.target.value);
  };
  
  
  //html
  <input placeholder="제목을 입력하세요" value={titleInput} onChange={titleInputHaedler} type="text" />
  <input placeholder="내용을 입력하세요" value={contentInput} onChange={contentInputHaedler} type="text" />

 

seTitleInput과 setContentInput을 이용하여 event.target.value를 통해 input에 입력된 값을 onChage하여 state에 저장하였다

 

state에 저장된 값을 가지고 추가하기 버튼을 누르면 리스트가 추가된다. 

const [todoList, setTodoList] = useState([]); // todo리스트 데이터
const todoAddHaedler = () => {
    let addtodo = {
      id:
        todoList.length === 0
          ? todoList.length
          : todoList[todoList.length - 1].id + 1,
      title: titleInput,
      content: contentInput,
      status: false,
    };
    if (titleInput === "") {
      alert("제목을 입력해 주세요");
    }else if (titleInput.length > 15) {
      alert("제목은 15글자 이하로 입력해 주세요");
    } else if (contentInput === "") {
      alert("내용을 입력해 주세요");
    } else {
      setTodoList([...todoList, addtodo]);
      setTitleInput("");
      setContentInput("");
    }
};

 

useState를 통해 todoList라는 빈배열을 만들고 배열의 요소를 객체로 추가하였다.

 

todoAddHeadler함수가 호출되면 id, title, content, status를 가진 객체 addtodo를 생성한다.

id는 배열이 빈배열이면 0을 추가하고 배열이 있으면 마지막 요소의 id에 +1을 한다. 

이렇게 하는 이유는 리스트를 여러개 추가하고 중간에 하나를 삭제하더라도 id가 중복되지 않게 하기 위함이다

title은 input에 입력된 title값을 추가한다.

content도 마찬가지로 input에 입력된 값을 추가한다.

status는 default값으로 false를 저장한다.

 

이렇게 생성된 객체를 setTodoList()를 통해여 todoList에 추가한다.

추가할때 불변성을 유지하여 컴포넌트가 리렌더링이 될 수 있도록

스프레이트 오퍼레이터 구문을 사용하여 todoList의 [ ]를 없에고 그 안에 addtodo를 추가한다.

setTodoList([...todoList, addtodo])

 

유효성 검사를 위해 if문으로 titleInput과 contentInput에 값이 없고 titleInput의 글자수가 15보다 크면 alert으로 에러메시지를 띄우고 returen으로 함수를 종료시킨다.

 

추가하기 버튼에 onClick을 통하여 버튼을 클릭하면 함수를 호출한다.

 <button onClick={todoAddHaedler}>추가하기</button>

 

input에서 Enter를 누르면 함수를 호출하도록 하였다.

<div>
    <p>제목 : </p>
    <input
      placeholder="제목을 입력하세요"
      value={titleInput}
      onKeyUp={(e) => {
        if (e.key === "Enter") {
          todoAddHaedler();
        }
      }}
      onChange={titleInputHaedler}
      type="text"
    />
    </div>
    <div>
    <p>내용 : </p>
    <input
      placeholder="내용을 입력하세요"
      value={contentInput}
      onKeyUp={(e) => {
        if (e.key === "Enter") {
          todoAddHaedler();
        }
      }}
      onChange={contentInputHaedler}
      type="text"
    />
</div>