TIL - 220920

22.09.20.화요일

📝컴포넌트 반복

✏️ 자바스크립트의 map()함수 이용

let arr = [1, 2, 3, 4, 5];
let newArr = arr.map((num) => num * 2);

console.log(newArr);
// [ 2, 4, 6, 8, 10 ]

✏️ 리스트 컴포넌트

const IterationSample = () => {
  const names = ['눈사람', '얼음', '눈', '바람'];
  const nameList = names.map(name => <li>{name}</li>);
  return <ul>{nameList}</ul>;
};

export default IterationSample;

// key를 설정하라는 경고가 뜬다.

✏️ key 설정

:데이터가 가진 고윳값을 key값으로 설정해야한다.

const IterationSample = () => {
  const names = ['눈사람', '얼음', '눈', '바람'];
  const nameList = names.map((name, index) => <li key={index}>{name}</li>);
  return <ul>{nameList}</ul>;
};

export default IterationSample;

💬

key 값 설정까지는 알겠는데, 초기설정, 데이터 추가기능 구현이 어려워서
더뎌지고있다ㅠ