map 함수 사용해보기!

 

• map() 함수란?

파라미터로 전달된 함수를 사용하여, 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 새로운 배열을 생성하는 것!

반복되는 컴포넌트를 렌더링 할때 사용하기 좋은 함수

 

  arr.map(callbackFunction(currentValue, index, array), thisArg);

currentValue 는 배열 내의 값 / index 현재 배열 내 값의 인덱스 / array 현재배열 / thisArg...

• 예제?(map 함수를 사용해 배열의 각 요소에 1을 더해서 반환하는 예제)

const numbers = [1, 2 ,3];
const plusNumbers= numbers.map(function(number){
	console.log(number);
    	return number + 1;
});

console.log(plusNumbers);

 

   =>es6문법으로 변환

const numbers=[1, 2, 3 ];
const plusNumbers= numbers.map((number, idx){
	console.log(number);
    	return number + 1;
});

console.log(plusNumbers);

 

• key 설정하기

key의 필요성=리스트를 만들때, 재렌더링을 할때, 변경 추가 삭제 등의 변화 상황을 빠르게 감지해서 렌더링 시키기 위해

할당하는 값.

-key는 고유한 값이여야 하고, 배열 요소의 고유한 값을 사용하거나 index를 사용하는 방식으로 쓴다.

 

{data.pages.map((page) => {
	return page.data.map((meet) => (
		<Meet key={meet.thunderPostId} meet={meet} />
    ));
})}

 {data&&
                data.pages.map((page,idx)=>{
                    return(
                        <React.Fragment key={idx}>
                        {page.data.map((post)=>(
                            <div
                            key={post.postId}
                            style={{cursor:"poiner"}}
                            onClick={()=>{
                                navigate(`posts/${post.postId}`)
                            }}>
                                <Post data={post}/>
                            </div>
                        ))}
                        </React.Fragment>
                    )
                })}

 

 

프로젝트에서 실제로 사용한 코드

(key에 모임의 포스트 아이디라는 고유한 값을 할당하여서 사용함, 내부의 요소들에 onClick 등의 요소들을 넣을 수 있음!)