.map, _lodash

1. map이란

Javascript 배열 객체 내장 함수인 map을 사용하여 반복되는 컴포넌트를 렌더링할 수 있습니다.
map 함수는 파라미터로 전달된 함수를 사용하여
배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성합니다.

2. map 사용법

var numbers = [1, 2, 3, 4, 5]; 
var processed = numbers.map(function(num) { 
	return num * num; 
});

1) 실제로 적용

const Example = () => { 
	const imgSrc = ["images/example.png", "images/example2.png"];
    const imgAlt = ["example.png", "example2.png"];
    return ( 
    	<Swiper slidesPerView={2} spaceBetween={24}> 
        	{imgSrc.map((src, idx) => (
            	<SwiperSlide key={idx}>
                	<img src={src} alt={imgAlt[idx] />
                </SwiperSlide>
            ))} 
        </Swiper>
    ); 
 }

이런식으로 이미지 개수만큼 반복하여 페이지에 출력해주도록 할 수 있습니다.

3. 기타

- lodash, map 함께 사용

https://record22.tistory.com/107 참고

translation.ko.json {
    "help": {
        "question": ["Q. 1", "Q. 2", "Q. 3", "Q. 4", "Q. 5", "Q. 6"],
        "answer": ["A1", "A2", "A3", "A4", "A5", "A6"]
    },
    ...
}

예를 들어 위와 같이 특정 json 객체의 개수만큼,
help의 question 배열의 개수만큼 map을 사용하여 반복시켜야한다면
lodash를 사용하여 아래와 같이 사용해주시면 됩니다.

...

import _ from "lodash";

...

{
    _.map(t("content.company.main1", {returnObjects: true}), (item, idx) => {
        const id = "qna" + idx;
        return (<div className="panel">
            <div className="panel-heading"
                id={id}
                onClick={
                    () => panelOpen(id)
            }>
                <h4 className="panel-title"> {item}</h4>
            </div>
            <div className="panel-wrap"
                id={id}>
                <div className="panel-body"
                    dangerouslySetInnerHTML={
                        {
                            __html: sanitizer(t("content.help.answer." + idx))
                        }
                }></div>
            </div>
            // if Img is ... //
            <img src={
                    sanitizer(t("content.company.main2 ..." + idx + ".0"))
                }
                alt={
                    sanitizer(t("content.company.main2 ..." + idx + ".1"))
                }/>
        </div>);
    })
}