[React] React 기본 - map/props 1

1. map

javascript의 함수

배열의 요소를 모두 순환하면서

• map의 callback 함수를 실행하고
• return 받은 값을 통해 새로운 배열을 생성하는 함수.

array = [1, 2, 3, 4, 5]

array.map( (item) => {
  console.log(item)
  return 0
}
          
//1 2 3 4 5
//new array is made, [0, 0, 0, 0, 0]

2. map을 이용한 props rendering

위 배열의 내용 중 name을 props로 넘겨준 후, name을 이용하여 웹사이트에 출력하는 logic을 만들어보자.

props를 넘겨줄때 유의하면서 logic을 구현하도록 한다.

• 해당 API나 배열함수(foodList)에 대한 map함수를 사용하기위해 {}(중괄호)로 바로 해당 함수에 접근한다.
• map함수를 사용하여 data를 인자로 받는다(여기서 item으로 해당 배열 내 객체들을 받는다).
• 각 요소들은 반드시 unique key값이 있어야하고, 이를 key에 할당해주어야 한다.
• 객체에서 원하는 data를 접근하여 확보(item을 받아서, 해당 객체에서 name 문자열을 뺴온다(id/name/rating)) 및 확보한 data를 Component에 모두 넘겨주어야 한다.
• Component에 넘겨준 data(<List name={item.name}/>)는 Component 선언부에서 props로 넘겨받는데, 이 props는 비구조화하여 name, rating을 모두 특정하여 넘겨준다.
• props는 객체형태이며, 넘겨준 name을 사용하기위해 그대로 {props}로 사용한다.

반드시 기억해야하고, 문법오류가 없도록 주의해야 하는 점은

넘겨받은 props는 객체이다.

넘겨주는 data가 배열과 같이 여러 element가 있다면

• 각 element의 유일한 id 값도 같이 넘겨주고, 이를 key에 부여해줘야 한다.
• 존재하는 모든 element는 모두 넘겨주고, props화 해야한다.
• 넘겨받은 props를 비구조화로 해주고, 이를 특정해줘야({name, rating}) data가 온전히 전달된다.

객체형태로 받고, 객체형태를 통해 활용해야 한다.

위와 같이 props / map 함수를 이용하여 코드의 가독성이나 효율을 높일 수 있다.

3. 오류예시

위 코드와 같이 넘겨받은 props의 정의가 모호하고, data전달이 잘 이루어지지 않는 경우 rendering이 이루어지지 않는다.

위와 같이 data 전달이 이루어지지 않았다면 props 비구조화, element 전달 등이 잘 이루어졌는지 반드시 확인해보자.

4. 참조링크

https://velog.io/@realryankim/Warning-Each-child-in-a-list-should-have-a-unique-key-prop