간단한 to-do List 만들기 (2)

2024.04.18 - [React/영화웹서비스만들기] - 간단한 to-do List 만들기 (1)

간단한 to-do List 만들기 (1)

 

1. array로부터 동일한 컴포넌트에 있는 것들을 render하는 법

  return (
    ...
      <hr />
      <ul>
        {toDos.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );

 

이 때 콘솔을 보면 컴포넌트의 list를 render 할 떄에는 key라는 prop을 넣어줘야한다는 경고문이 뜬다.

 

아래와 같이 키를 추가 해 주면 된다.

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