list.map( )

list.map( )은 프론트엔드 하면서 제일 많이 쓰는 구문아닐까 싶다.

{ list.map((value, index) => 
	<Item todoItem={value} index={index} key={index}/>)
 }

보통 이런 식으로 코드를 작성해서 list안의 각 값에 따라 <Item> 컴포넌트를 쫘악 펼쳐주는 역할을 하는데 개념자체를 혼동해버렸다... 

<Item>에서 수정 모드로 변경하게 되면 전체 배열이 수정모드로 변경된다고 생각하고 수정모드로 변경된 아이템을 찾아서 따로 적용해줘야된다고 착각하고 있었다.

<Item>은 배열의 요소 중 오직 하나의 아이템이고 하나의 값만 넘어오기 때문에 내가 수정버튼을 누르면 내가 누른 그 <Item>컴포넌트만 변경되는 것이다!!!

 

 

그래서 다시 정리한다... map()은 뭘까?

보다시피 map은 배열 내에 모든 요소에 대해 주어진 함수를 실행하고 결과를 모아서 '새로운 배열'을 '반환'한다.

여기서 주목해야 하는 것은 새로운 배열을 반환한다는 것이다.

 

{ list.map( x => <div> x </div> ) }

이 코드는 배열 내의 모든 요소 각각을 <div> x </div>로 만든 후 그 결과들을 모아 반환하는 것이니까, 결국 아래와 같은 코드이다.

<div> list[0] </div>
<div> list[1] </div>
<div> list[2] </div>
...

 

 

따라서, 

{ list.map((value, index) => 
	<Item todoItem={value} index={index} key={index}/>)
 }

<Item>컴포넌트가 받아오는 todoItem은 배열의 아이템 하나이고, <Item>은 list라는 배열의 모든 요소를 형식에 맞게 보여주는 역할만 할 뿐이다.

만약 Item에서 수정모드로 변경하게 되면 '내가 누른 그 아이템만 변경'된다는 걸 꼭! 꼭 기억하자....

 

 

 

+ 추가로 map과 혼동할 수 있는 함수로 forEach가 있는데, 얘는 반환값이 없고 그냥 배열을 돌면서 주어진 함수를 실행하기만 한다.