자바스크립트 배열 map() 함수 react 적용

ex)

     funtion Example1(){

      const names = ['눈사람', '얼음', '눈', '바람'];

      const nameList = names.map(name=> <li> {name} </li>);

 

  return(

     

      return <ul>{nameList}</ul>; 

 

)

}

export ~~~ ;

-------------------------------------------------------------------------------------

리액트에서 key값이 있다면 어떤변화가 일어났는지 더욱 빠르게 알 수 있습니다.

key 값은 언제나 유일해야함 따라서 데이터 고윳값을 key로 설정해야 합니다.

하지만 컴포넌트에 고유한 번호가 없으면 콜백함수의 인수인 index를 사용하면 됩니다. 

고유한 값이 없을때만 index 값을 key로 사용해야 합니다. index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링하지 못합니다.

. 

.

.

ex)  const nameList = names.map((name, index) => <li key = {index}> {name} </li>);

      return <ul>{nameList}</ul>;

};