컴포넌트에 대하여

웹개발 할 때 진짜 귀찮은 경우가

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  
</ul>  

이렇게 li태그 많이 넣을 때 아주 귀찮다.

그런데 리액트에서 map함수를 사용하면 귀찮은 반복행동을 안해도된다는데?!

const IterationSample = () => {
    const nums = [1, 2, 3, 4, 5];
    const numList = nums.map(num => <li>{num}</li>)
    return(
        <ul>{numList}</ul>
    );
}

export default IterationSample;

성공적으로 나오긴 함
이렇게 하면된다 ㅇㅇ 근데 에러가 뜸

왜 에러가 뜨는가?

key 가 없기 때문 보통 데이터가 가진 고윳값을 key로 설정함
js 에서 프로퍼티를 생각하면 좋을 듯

const IterationSample = () => {
    const nums = [1, 2, 3, 4, 5];
    const numList = nums.map((num, index) => <li key={index}>{num}</li>)
    return(
        <ul>{numList}</ul>
    );
}

위와 같이 수정해주면 됨

주의사항

key는 유일해야함 key 값이 중복된다면 렌더링 과정에서 오류발생 상태안에서 배열을 변형할 때는 배열에 직접 겁근하여 수정하는 것이 아니라 concat, fliter 등의 내장 함수를 사용하여 새로운 배열을 만든 후 이를 새로운 상태로 설정해 주어야한다는 것!!!!!