iteration: javascript array 복습

map() 문법

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

key

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

push 말고 concat을 쓰는 이유

// append new "Name" object
  const onClick = () => {
    //names object array에 새로운 name 추가
    const nextNames = names.concat({
      id: nextId,
      text: inputText
    });
    setNextId(nextId +1);
    setNames(setNames);
    setInputText('');
  }

왜 names.push가 아니라names.concat을 썼을까?

• 리액트에서는 컴포넌트 성능 최적화를 위해 불변성 유지 원칙을 지켜야함.
• 불변성 유지란 기존 상태를 그대로 두면서 새로운 값을 상태로 설정하는 것.
• push는 기존 배열을 수정하고 concat 새로운 배열을 만든다.

filter()

const numbers = [1,2,3,4,5,6];
const biggerThanThree = numbers.filter(number => number > 3);
// result: [4,5,6]

기본적으로 map() 처럼 iteration 함수 인 듯.

⚠️ 상태 안에서 배열을 변형할 때는 (cuz array is dynamically changing) concat, filter 등 array method를 사용하여 새로운 배열을 만든 후 이를 새로운 상태로 설정해주자.

---

본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.

#한컴AI아카데미 #AI개발자 #AI개발자교육 #한글과컴퓨터 #한국생산성본부 #스나이퍼팩토리 #부트캠프 #AI전문가양성 #개발자교육 #개발자취업