[React] map( )과 컴포넌트

Array.prototype.map()

배열을 대상으로, 요소하나하나를 돌면서 뭔가를 처리해주는 것.

const arr = [1,2,3,4,5]
arr.map((num) => {                             
//콜백함수가 들어감, 인자로 배열의 요소 하나하나가 들어감(이름은 자기가 붙이고)
    console.log(num)
    //return num 을 하면. 새로운 배열이 나옴.
})

arr.map((요소 하나하나를 뜻하는 이름) => { 함수식 }
map의 인자로는 콜백함수가 들어가는데, 콜백함수에 매개변수를 지정하여,
콜백함수가 작동할 때 다양한 값이 나오게 할 수 있다.

이런 단순?해보이는 메서드를 컴포넌트와 결합하였을 때 엄청난 힘이 생긴다고 한다.

'컴포넌트를 맵으로 돌릴것이다. 이것이 리액트 매직 갓.'

arr.map((num, idx(편하게 key값 지정? 이 idx는 해당 배열의 idx)) => {
    return <Component key = {유니한 값(고유값), 주로 index}, number(프로퍼티키(이름)) = {num}(값) />    
    //key는 리액트에서 변화를 알기 위해 key를 지정해야함!!!
})

<Component number={num} />
<Component number={num} />
<Component number={num} />
// 이런식으로 나옴

console.log(this.props)
{ number : 2 }

• map의 콜백함수의 인자로는, map 메서드가 작동하며 접근하는 배열의 각 요소를 지칭하는 이름, 위의 경우는 num이 들어감(이 이름은 자유롭게 작성이 가능하다. 브라질리언킥도 가능)

• 두번째로 idx가 들어간다.(필수는 아님. 심지어 세번째 인자도 있음) idx가 들어가는 이유는...
  특히 컴포넌트를 map을 돌릴 때 생성되는 각 컴포넌트에 key 값을 주기 위함이다. idx를 key값으로 주는게 편함.(이러면 안된다고 하는데 일단 편함)

• 각 컴포넌트에 key 값을 주는 이유는 컴포넌트 중 변화가 생겼을 때. 무엇이 변했는지 리액트가 확인하기 위함이다. 이걸 알게 됨으로 리액트는 매번 모든 페이지의 요소들을 render하는 것이 아니고 변경 사항만 render한다.(?)

바뀐 state 값으로 render가 다시 돌아

map과 컴포넌트의 다른 예시

const arr2 = [{},{},{}]

arr2.map((obj, index)=> {
    return <Component key={obj.email} number={num} />
});


this.state({
    arr : [{}, {}, {}]
})

{this.state.arr.map((obj)=> {
    return < Component name={obj.name} age={obj.age}/>                       
    
    //obj에 있는 필요한 정보들을 프로퍼티? 로 넘겨줌(props할 때 잘 써야해)
    // map과 컴포넌트를 함께 사용할 때 대충 이런식으로 생겼다는거임.
})}

아무튼
서버호출, 데이터바꿔주고, 스테이트값으로 만들고, 맵을 돌려

이거 정말 잘 하고 싶네!