[React] 7-1. React로 간단한 todo list 만들어 보기 (2)

📌 To Do List 이어서 만들기

❗지난 시간에서 헷갈릴 만한 내용

state를 수정할 때 직접 수정이 불가하므로 modifier 함수를 이용하여 값을 전해주는 방식을 사용하였다.

-인자로 문자열, 숫자 같은 특정 값을 전달해주는 경우

state를 바로 그 값으로 업데이트 할 수 있다.

- 인자로 함수를 보내는 경우

modifier 함수의 인자로 보내는 함수의 첫 번째 인자는 현재 state 값을 받아온다. 우리는 전 시간에 이 현재 state값을 이용하여 새로운 state 값을 반환해주는 함수를 인자로 사용하였다.

6. 입력한 todo 각각을 컴포넌트로 만들어 본다.

toDo들은 toDos라는 하나의 배열에 모두 저장되도록 하였다.

이 배열에 map 함수를 적용하여 각각의 toDo들을 list로 만든다.

.....
      </form>
      <hr />
      <ul>
        {toDos.map((item) => (     // 주목!
          <li>{item}</li>
        ))}
      </ul>
    </div>
.....

* map 함수를 적용하면 반환된 값은 새로운 배열에 들어가게 된다. (원래 배열의 원소가 바뀌는 것이 아니다.)

* map 함수에 인자로 들어가는 함수의 첫 번째 인자는 해당 배열의 현재 item들을 가져올 수 있게 한다. (인덱스 0번부터 순서대로)

결과로 input에 할 일을 입력하고 submit하면 입력한 할 일이 ul의 형태로 화면에 뜨는 것을 볼 수 있다.

먼저 입력한 할 일은 다음 할 일 입력에 밀려 아래로 내려간다.

그런데 console창에 다음과 같은 경고 문구가 뜨는 것을 볼 수 있다.

Warning: Each child in a list should have a unique "key" prop.

이것은 같은 component에서의 list를 render할 대 key라는 prop을 넣어 주어야 한다는 의미이다.

이것은 react가 기본적으로 list에 있는 모든 item들을 인식하기 때문에 나타나는 경고 문구이다.

key는 고유한 값으로 정해주어야 한다.

따라서 map 함수를 이용하여 key를 정해줄 것이다. map 함수의 인자로 들어가는 함수의 두 번째 인자는 해당 array의 element의 index를 받도록 되어 있다.

이 인덱스를

의 key로 지정해 줄 것이다.

<ul>
  {toDos.map(
    (
      item,
      index // 주목!
    ) => (
      <li key={index}>{item}</li> // 주목!
    )
  )}
</ul>

이제 console창에 문제가 생기지 않는 것을 볼 수 있다.

todo list 만들기 완료!