[React] JSX 리스트 반복 출력 : map

JSX에서는 FOR문을 사용할 수 없다. for문과 비슷한 동작을 하는것이 바로 map()함수이다.

Todo리스트를 구현할거고, 다음과 같이 배열 안에 해야할 일 목록이 들어있다고 해보자.

todoData = [
    {
      id: "1",
      title: "study",
      completed: false,
    },
    {
      id: "2",
      title: "clean room",
      completed: true,
    },
  ];

 

이것을 jsx에서 리스트로 표현을 하고자 할때는 다음과 같이 map()을 사용해주면 된다. 아래는 render()내의 함수이다.

render() {
    return (
      {this.todoData.map((data) => (
            <div style={this.getStyle()} key={data.id}>
              <input type="checkbox" defaultChecked={false} /> {data.title}
              <button style={this.btnStyle} onClick={() => { this.handleClick(data.id);}}>
                x
              </button>
            </div>
       ))}
    );
  }

 

this.TodoData.map() 함수를 통해 for문과 동일한 효과를 받아오고 있으며, 현재의 투두 데이터가 data 변수에 담겨있다. 

 

주의할 것은 key값이다. map()함수를 쓰기 위해서는 각 아이템에 key값이 부여되어야 한다. 선택이 아니라 필수이다. 

이는 VirutalDom에서 어느부분이 바뀌었는지를 파악하기 위한 식별자가 필요하기 때문이다. (virtual dom은 React 겉핥기 포스트에 간략하게 나와있다..)

 

기본포맷은 아래와 같은 형태이다.

1. map 함수를 감싸는 {} 블록,

2. data와 index를 받아 job을 정의하는 부분이 {}가 아니라 ()로 감싸져있음

에 주의해야할 것 같다. 

{this.todoData.map((data,index)=>(
	//job..
))}

 

또 한가지 주의할 점은 index 이다.  위에서 제공되는 index 변수는 배열의 index값을 나타낸다. (index 변수를 사용하지 않을거면 생략해도 된다.)

예시에서는 각 todo 아이템들에 id가 부여되어있고, map()함수 내의 key값을 index가 아닌 todo아이템에 들어있는 고유id번호를 부여하는 것을 볼 수 있다. 여기에 data.id 대신 index 값을 넣고싶겠지만, 넣지 않는것이 좋다. 

{this.todoData.map((data) => (
	//here
    <div style={this.getStyle()} key={data.id}> 
    
))}

 

만약 배열에 [할일1, 할일2] 순서대로 들어있고, map()함수의 각 key값을 index로 지정한다고 가정해보자. 어떤 문제가 발생할까??

그러면 리스트를 뿌릴때 할일1 의 key값은 0, 할일2의 key값은 1이 된다.

여기에서 0번째에 할일0을 삽입한다. [할일0,할일1,할일2] 이렇게된다.

그러면 virtualDOM은 key = 0, 1, 2 세 가지 모두 데이터가 변경되었다고 판단하고 모든 아이템을 리렌더링 한다.

 

반연 map()함수의 key값을 index가 아닌 고유의 id로 지정하면 어떨까??

[할일1 : 1, 할일2 : 2 ] 의 아이디가 부여되어있는 상태에서 [할일 0 : 0 ] 이 0번째 인덱스에 추가된다.

[할일 0 : 0, 할일1 : 1, 할일 2: 2] 가 될것이다. 

그러면 key = 1, 2 는 데이터가 변경되지 않았고, 사이에 0만 바뀌었기 때문에 할일1, 할일2 를 약간 아래로 미룬 뒤 새로운 아이템 <할일1>을 사이에 추가하게 된다. 

index를 사용할경우 이런 현상이..!

이런이유로 UI를 로드할때 index는 사용하지말자!

 

 

참고문헌

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Array.prototype.map() - JavaScript | MDN