~0524 React toDolist pt.2 천천히 오가는 대화 속에

비가온다 저녁에 바보같은 나! https://youtu.be/F1ZwzmqsYXA

toDoList를 이어서 제작한다. 추가할 기능은 크지 않다. 저번에 만든 기능 + 할 것들 적으면 li태그로 하나하나 나열하는 식

우리가 js바닐라로 만들 때는 html로 만들었다가, js로 입력한 것들 나타내기 하면서 꽤나 많은 코드가 쓰였는데 그거랑 비교해보자.

대략 69줄의 코드 물론 js로 만든게 기능도 더 많고 하지만, 그걸 감안하고 보도록 하자 고

 

pt1 때 만든 array(toDos)안에는 여러 요소들이 존재하는데, 이 요소들을 각각의 컴포넌트로 만들고 싶다.

 

pt1 때 제작한 부분까지 캡쳐

 

여기서 우리는 map함수를 이용 할 것인데, array.map(array의 item을 변경시킬 함수) 배열의 각 item 하나하나함수가 실행되고 그 값을 return한다.

 

우리는 toDos라는 배열에다가 map함수를 달았다

 

toDos array에 map함수를 그리고 변경시키는 내용은 item(내가 적은 할 것들)을 li태그로 묶인 item(내가 적은 할 것들)로 return 하는 것이다. 그리고 js문법이기에 {}로 묶어줌 이게 끝이냐고? 웅 끝이다. 이 짧은 코드 2~3줄 어간으로 어떻게 바뀌었나 보자.

할 것들을 적으면 밑에 li태그로 하나하나씩 생성되는 것을 볼수 있다.

 

근데 오류가 뜬다.

 

list에 있는 각 얼라들이 고유한 키prop을 가져야한다 이말이야~ 원하는대로 해주자

 

map함수에 대한 설명

map함수는 첫 인자로 value를 그리고 그다음은 index를 가진다. 처음 입력한 것부터 0, 1, 2, 3 즉 number를 가진다.

이걸로 고유한 키값을 설정해주면 될 것 같다. 왜 와이? 같은 index를 가지게 될 일도 없을 테니

초간단

line28, 29 index를 인자로 받고 이 인자를 각 li에 key값으로 부여했다 오류도 금세 사라졌다.

확실히 js코드와 비교해보면 나타내는 모습은 차이가 있겠지만 그걸 감안하고도 todolist에서 할 일들을입력받아 화면에 나열하는 과정에서 훨씬 효율적인 것을 볼 수 있다. 끝