개발자로한걸음
435
2021-03-04 14:28:42
4
216
#880731 Tech Q&A

자바스크립트 map 할때 짝수 홀수만 뽑아내는법

json 에서 사진,  글을 추출해서  

packages 라는 변수에 넣어줬어요. 

packages =[ "image1", "content1" , "image2", "content2" ...  ] 이런식으로 구성되어있고 

이걸 이제 map으로 빼오려고합니다. 


리액트 return 하단에 이렇게 값이 들어갈 예정인데요 

하단처럼하면 사진과 글은 보이지만,    

사진 

image1 내용1 이렇게  image가  string 타입으로 본문에 들어갑니다.   

 <li>
                        {packages.map(function (i) {
                            
                            return (
                                <li>
                                    <img src={i} alt="img" />
                                    <span>{i}</span>
                                </li>
                            );
                        })}
                    </li>

그래서 짝수랑 홀수만 뽑아내자 하고 map 안에 함수를 만들고 변수를 선언해 even, odd라는 변수를 만들어 넣어줬는데 ...  

 <li>
                        {packages.map(function (i) {
                            const even = 2 * i;
                            const odd = 2 * i - 1;
                            return (
                                <li>
                                    <img src={even} alt="img" />
                                    <span>{odd}</span>
                                </li>
                            );
                        })}
                    </li>


이렇게 떠버리네요 ㅠㅠ  제가 놓치고 있는게 있을까요......ㅠㅠ 


0
0

  • 답변 4

  • 반응콩
    73
    2021-03-04 14:36:32

    callback 인수에는 array의 object들이 들어 가겠는데요. 숫자형이 아니라서 뜨는 에러같네요.
    index는 callback 2번째 인수에 들어갑니다.

    0
  • hoonnote
    628
    2021-03-04 14:42:24 작성 ∙ 2021-03-04 14:43:03 수정됨

    일단 map을 먼저 이해하셔야할듯 한데요

    지금 상황은 



    packages =[ "image1", "content1" , "image2", "content2" ... ]

    packages.map((`패키지 안에 있는 원소를 가리킵니다`) => {
    const even = 2 * `원소`
    const odd = 2 * `원소` - 1
    return (
    <li>
    <img src=`even === 2 * 원소`>
    `2 * 원소 - 1`
    </li>
    )
    })


    이런 상태에요. 

    even의 경우엔 2 * 'image.jpg' 가 들어가게 되고

    odd 는 2 * '이미지 설명글' - 1 이 들어가게 되죠.

    숫자랑 문자열을 연산해서 데이터를 출력하는 경우 NaN가 나와요 

    그래서 NaN이 나오는건 정상적이죠


    그럼 이걸 어떻게 해결이 가능할까요 

    map에서 인덱스를 받아와 사용하는것도 가능한데, 그것보단


    object형 데이터를 활용해보세요

    packages = [
    {
    src: 'imageSrc1.jpg',
    description: 'img1 description'
    },
    {
    src: 'imageSrc2.jpg',
    description: 'img2 description'
    },
    {
    src: 'imageSrc3.jpg',
    description: 'img3 description'
    },
    ]

    packages.map((imgData) => (
    <li>
    <img src={imgData.src} alt='img' />
    <span>{imgdata.description}</span>
    </li>
    ))




    0
  • 개발자로한걸음
    435
    2021-03-04 15:12:22 작성 ∙ 2021-03-04 15:17:07 수정됨

     hoonnote 

    답변 너무 감사합니다. 저렇게 작동되는 방식이군요. 뭐가 문제였는지 딱 와닿았어요. 


     다만, package내용이 
    json 에서 추출해와서, 푸시한거라 object로 만드는 법을 모르겠어요. 아래의 
    json 에서 이렇게 많은 기사중에 내가 원하는 no의 기사의 img ,  content를 packages에 push로 넣은 상태거든요..  일단 만들어보긴 해볼텐데 추가적으로 궁금한게 있어서 글을 쓰게 되었습니다!! 

    [{
        "no": "news6",
        "img": [
            "../img/new6_1.PNG",
            "../img/new6_2.PNG",
            "../img/new6_3.PNG",
            "../img/new6_4.PNG",
            "../img/new6_5.PNG",
            "../img/new6_6.PNG"
        ],
        "title": "[인터뷰] '",
        "content": [
            "내용", "내용2","내용3","내용4", "내용5","내용6"
        ],
        "date": "2021.01.30"
    },
{
        "no": "news6",
        "img": [
            "../img/new6_1.PNG",
            "../img/new6_2.PNG",
            "../img/new6_3.PNG",
            "../img/new6_4.PNG",
            "../img/new6_5.PNG",
            "../img/new6_6.PNG"
        ],
        "title": "[인터뷰] '",
        "content": [
            "내용", "내용2","내용3","내용4", "내용5","내용6"
        ],
        "date": "2021.01.30"
    }
]

    그래서 다른 방법으로 이렇게  짝수 홀수일때로 나눠봤는데요.


       




      <li>
                        {packages.map(function (i) {
                            if (i % 2 != 0) {
                                return <img src={i} alt="img" />;
                            } else {
                                return <span>{i}</span>;
                            }
                        })}
                    </li>


    그러면 

    이렇게 죄다 span으로 들어가버리네요 .. 

     

    0
  • hoonnote
    628
    2021-03-04 18:11:58 작성 ∙ 2021-03-04 18:12:21 수정됨

    제가 설명이 부족했던듯 해요.

    일단 map 동작하는걸 설명드리자면

    const myContent = ['이미지1', '설명1', '이미지2', '설명2'];

    myContent.map(function(content, index) {
    console.log(content) // 이미지1, 설명1, 이미지2, 설명2 가 출력될거에요
    console.log(index) // 0, 1, 2, 3 이 출력될거에요
    })

    일단 map 함수의 경우, 콜백 함수를 받아오잖아요
    그리고 콜백 함수에 건네주는 인자는 이렇게 받아와요

    someArray.map(function(어레이 안에 있는 요소 하나, 해당 요소의 인덱스) {
    해당 요소와 인덱스를 활용해 로직 처리를 한 뒤
    return 키워드로 새로운 어레이를 반환
    })

    작성자님께서 쓰신걸 보면
    지금 map 함수 안에
    map(function(i) {})
    를 했는데

    그럼 i는 무슨 데이터를 갖고있을까요?
    인덱스일가요, 어레이 안에 있는 요소 데이터일까요

    정답은 요소입니다!
    그래서 지금 작성하신 코드를 글로 풀어보자면

    packages.map(function(패키지에 있는 요소) {
    if( 패키지에 있는 요소 % 2 != 0) {
    return img
    } else {
    return span
    }
    })

    이런식으로 되어있는데
    패키지에 있는 요소는 string 데이터타입이잖아요.
    질문자님이 % 2 해서 찾고싶은 값은 해당 요소의 인덱스 값이구요.

    그러면 코드를 이렇게 바꾸면 되겠죠?

    packages.map(function(item, index) {
    if (index % 2 !== 0) {
    return <img src={item}></img>
    } else {
    return <span>{item}</span>
    }
    })




    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.