동백 // 노마드 코더 React JS: To Do list

출처 : https://nomadcoders.co/

노마드 코더 Nomad Coders

 

---

 

 

To Do List

핵심 : to-do list를 만들며 배운것들을 복습해본다.

 

 

// --------- import ---------
import { useEffect, useState } from "react";

function App() {
  // --------- state ---------
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  
  // --------- function ---------
  const onChange=(event) => {
    setToDo(event.target.value); };
  
    const onSubmit=(event) => {
    // form의 submit 이벤트시 새로고침 되는 것을 막아줌.
    event.preventDefault();
    if(toDo === ""){
      return;
    }
    // ...array의 의미는 기존 array에 index들을 가져온다는 의미이다.
    // 아래 코드는 toDo를 기존 currentArray에 새로운 인덱스로 넣어서 새로운 array를 만든다는 뜻이다.
    setToDos(currentArray => [toDo, ...currentArray]);
    // 입력을 제출하였으면 다시 input창을 "" 빈 값을 넣어줌.
    setToDo("");
  };
  console.log(toDos);
  // --------- rendering ---------
  return (
    <div>
      <form>
        <input onChange={onChange} value={toDo} type="text" placeholder="write your to do..." />
        <button onClick={onSubmit}>Add to Do</button>
      </form>
    </div>
  );
}

export default App;

 

 

 

. state를 수정하는 함수(modify)를 사용할 때 두가지 옵션이 있다는 것을 꼭 기억해야함!!!

setToDos("");

1. 위의 코드 같이 우리가 저장한 값을 modify에 인자로 넘겨줄 수 있다.

 

setToDos(currentArray => [toDo, ...currentArray]);

2. 단순히 값만 보내는 것이 아니라 함수를 보내는 방법이다.

함수를 보낼 때 React는 함수의 첫번째 인자로 현재 State를 보낸다. 즉 우리는 현재 State를 계산하거나 새로운 State를 만드는데 사용할 수 있게 되었다는 말이다.

 

 

. array의 각각 index를 컴포넌트로 만들고자 한다.

-map()은 array의 element들을 함수를 통해 각각의  element들을 새로운 array로 바꿔주는 것이다.

쉽게 말하면 예전 array를 가져와서 변형시키는 것이다.

 

-map()의 함수의 첫번째 인자는 value이어야하고, 이는 각각의 toDo를 의미한다. 

두번째 인자는 index이다.

. 같은 컴포넌트의 list를 render할 때는 key라는 prop을 넣어줘야 하므로 위에 key를 넣어주었다.

        {toDos.map((toDo, index)=> <li key={index}>{toDo}</li>)}

. 위 코드의 뜻은 toDos array의 각각의 element들을 map을 통해서 li element로 만들어준다.

 

 

// --------- import ---------
import { useEffect, useState } from "react";

function App() {
  // --------- state ---------
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  
  // --------- function ---------
  const onChange=(event) => {
    setToDo(event.target.value); };
  
    const onSubmit=(event) => {
    // form의 submit 이벤트시 새로고침 되는 것을 막아줌.
    event.preventDefault();
    if(toDo === ""){
      return;
    }
    // ...array의 의미는 기존 array에 index들을 가져온다는 의미이다.
    // 아래 코드는 toDo를 기존 currentArray에 새로운 인덱스로 넣어서 새로운 array를 만든다는 뜻이다.
    setToDos(currentArray => [toDo, ...currentArray]);
    // 입력을 제출하였으면 다시 input창을 "" 빈 값을 넣어줌.
    setToDo("");
  };
  // --------- rendering ---------
  return (
    <div>
      <h1>My To-Dos ({toDos.length})</h1>
      <form>
        <input onChange={onChange} value={toDo} type="text" placeholder="write your to do..." />
        <button onClick={onSubmit}>Add to Do</button>
      </form>
      <hr />
      <ul>
        {toDos.map((toDo, index)=> <li key={index}>{toDo}</li>)}
      </ul>
    </div>
  );
}

export default App;

 

 

---

 

핵심 요약

1. state를 수정하는 함수(modify)를 사용할 때 두가지 옵션이 있다는 것을 꼭 기억해야함 {
    1. 우리가 저장한 값을 modify에 인자로 넘겨줄 수 있다.
    2. 값만 보내는 것이 아니라 함수를 보내는 방법이다.
}

 

2. map()은 array의 element들을 함수를 통해 각각의  element들을 새로운 array로 바꿔주는 것이다.
쉽게 말하면 예전 array를 가져와서 변형시키는 것이다.

 

3. 같은 컴포넌트의 list를 render할 때는 key라는 prop을 넣어줘야 하므로 위에 key를 넣어주었다.