[노마드코더] ReactJS로 영화 웹 서비스 만들기 - To do list(2)

https://nomadcoders.co/react-for-beginners

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

map함수란?

- 간단하게 말하면 array를 변형시켜주는 함수

- return하는 값이 어떤건지 간에 그 값이 새로운 array가 되는 것

- 이 함수는 array의 각 item들을 한번씩 동작해 거쳐갈 것

- 이때, item대신 다른 변수명을 넣어도 무방함

- 첫번째 argument는 value, 두번째 argument는 index(number)

ex)

 

//item들을 모두 :)로 변경
['hi', 'hello'].map(() => ":)")
//item들을 모두 대문자로 변경
['hi', 'hello'].map((item) => item.toUpperCase())

 

import { useState } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "") {
      return;
    }
    setToDo("");
    setToDos((currentArray) => [toDo, ...currentArray]);
  };
  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="Write your to do..."
        />
        <button>Add To Do</button>
      </form>
      <hr />
      <ul>
      //각각의 todo가 나타남
        {toDos.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

 

=> 위의 코드에서는 component를 return시킴

 

여기서 위의 코드의 콘솔창에 오류가 뜸!

=> warning : 같은 component의 list를 render할 때는 'key'라는 prop을 넣어줘야 한다 

(react가 기본적으로 list에 있는 모든 item들을 인식하기 때문에 오류 발생)

 

이때, key는 고유의 값(unique)이어야 함

 

//생략
<ul>
  {toDos.map((item, index) => (
    <li key={index}>{item}</li>
  ))}
</ul>

 

※ key

- react가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도와줌

- element에 안정적인 고유성을 부여하기 위해 배열 내부의 element에 지정해야 함

- 대부분의 경우 데이터의 id를 key로 사용, 하지만 안정적인 id가 없다면 index를 key로 사용 가능

(항목의 순서가 바뀔 수 있는 경우에는 권장하지x)