제로초님 각 id 값 마다 특정 이미지 넣기

[리뉴얼] React로 NodeBird SNS 만들기

작성

606

제로초님 안녕하세요 다름이 아니라.
제가 신발 상세 페이지에서
json 에 신발 사이즈 Array(10) 개가 있고.

0,1,2,3,4,5,6,7,8,9,10 이 있습니다 id 값이.

각 id 값 마다 이미지를 부여 하고 싶습니다.

예시로 들자면?
만약 Array 중 id 값 -> 8 인 값에 예시로 구름 이미지를 넣어주고 싶고,
id 값 중 5 인 값에는 햇님 이미지를 넣어주고 싶습니다.

제가 프론트쪽 공부해서.
백단에서 이미지를 넣어주면 되지만,
프론트에서 한번 id 값마다 특정 이미지를 넣어주고 싶은데 어떻게 해야 할 지 감이 안옵니다 ㅠㅠㅠ 도와주세요

react jsx express nodejs redux Next.js

답변 2

김수민

질문자

제로초님 안녕하세요.

제가 한 가지 더 여쭤 보고 싶은 것이 있습니다.

이게 처음에는 brandtext.length 20개 중 5개씩 데이터를 출력하고

더보기 handleClick 할 떄 마다 5개씩 보이도록 만들었습니다.

제가 여기서 이제 더보기 버튼을 다 클릭해서 20개가 5*4 번 클릭 해 펼쳐지면

접기 함수를 만들어서 더보기 버튼이 사라지고 접기를 누르면 다시 5개만 있도록 하고 싶습니다.

어떻게 해야 할 지 감이 안잡히네요

 
    const [visibleBlogs, setVisibleBlogs] = useState(5)

   
 
    const handleClick = () => {
        setVisibleBlogs(visibleBlogs => visibleBlogs + 5)
  }
          {ProductDetail.brandtext?.length >= visibleBlogs &&  
                    <button type="button" onClick={handleClick}>더보기</button>
                    }

제로초(조현영)

지식공유자

더보기 버튼 보일지 말지도 state로 만들어야하고, 보여주는 개수는 if문에 따라서 5개만 보이게 접거나 지금처럼 5개씩 늘려나가면 됩니다

김수민

질문자

아래 코드 처럼 작성해서 만들었는데.

처음에 5개가 출력되고 더보기 버튼을 누르면 5개가 사라지고 그 다음 클릭이 작동을 안하네요..

왜 이러는 지 모르겠습니다.

    const [visibleBlogs, setVisibleBlogs] = useState(5)
    const [expanded, setexpanded ] = useState(false);
 
    const showMore = () => {
        visibleBlogs === 5 ? (
setVisibleBlogs({ visibleBlogs: ProductDetail.brandtext?.length, expanded: true })
        ) : (
setVisibleBlogs({ visibleBlogs: 5, expanded: false })
        )
    }
 
 
 {ProductDetail && ProductDetail.brandtext?.length ?
        ProductDetail.brandtext.slice(0, visibleBlogs).map(All => (
                <li key={All.id}>
{All.displayText}    </li>
                        )) : <li>성분이 없습니다.</li>}
 
                    <button type="button" onClick={showMore}>
                        {expanded ? (
                            <span>닫기</span>
                        ) : (
                            <span>더보기</span>
                        )}  
                    </button>
                 
 
 

제로초(조현영)

지식공유자

setVisibleBlogs 안에 왜 객체를 넣으시나요? setExpanded를 쓰셔야 합니다.

제로초(조현영)

지식공유자

size를 state로 관리하시면 됩니다.

const [size, setSize] = useState('');

처음에는 size가 안 들어갔다가 나중에 size 선택을 하면 알아서 useQuery의 주소도 바뀌고 다시 요청을 보냅니다.

김수민

질문자

조현영 개발자님 setExapdned 를 사용해서 해봤는데.

더보기 클릭시 -> 닫기 button 으로 활성화 되고.

length 만큼 data 가 출력이 안되고 있습니다.

빠쁘실 텐데, 시간 써 주셔서 정말 감사합니다.

const [visibleBlogs, setVisibleBlogs] = useState(5)
    const [expanded, setexpanded ] = useState(false);

const showMore = () => {
        visibleBlogs === 5 ? (
            setexpanded({ visibleBlogs: ProductDetail.brandText?.length, expanded: true })
        ) : (
            setexpanded({ visibleBlogs: 5, expanded: false })
        )
    }

제로초(조현영)

지식공유자

아뇨. 지금 클래스의 setState와 착각하시는 것 같은데요.

setVisibleBlogs(5);
setExpanded(false);

이렇게 따로따로 하셔야죠.

김수민

질문자

해결 됐습니다 감사합니다.

제로초(조현영)

지식공유자

삼항연산자를 많이 쓸수밖에 없습니다.

{item.id === 5 ? <img src={require('sun.png')} /> : item.id === 8 ? <img src={require('cloud.png')} /> : null}

김수민

질문자

조현영 개발자님 그러면 삼항 연산자를 어디서 넣어 주어야 할까요?

id 값에 따라 출력 해 줍니다. 1,2,3,4,5,6,7,8,

   {ProductDetail && ProductDetail.size.map(Sizes => (
                                <li key={Sizes.id}>{Sizes.displayText}</li>
                            ))}

제로초(조현영)

지식공유자

map 내부에서 원하는 위치에 넣으셔야겠죠. 참고로 React는 루트 태그가 하나여야 한다는 사실 주의하세요.

김수민

질문자

삼항연산자를 어떻게 넣어 주어야 할 지 모르겠습니다.

삼항연산자라면 ? () : () 이런 식으로 있는데.

저기 코드 문법에서 삼항연산자를 어떤 식으로 넣어 줘야 할 지 모르겠습니다.. ㅠㅠ

key: id 값으로 이뤄 있으니까 { Sizes.id } <- 괄호 안에서 추가 시켜주는 건 삼항 연산자가 아닌 거 같고.

{ Warn.displayText } 여기 부분에서 추가 시켜주어야 하는 거 같은데 어떻게 해야 할 지 모르겠습니다.

React 훅으로 뭐 페이지네이션을 만든다 거나 아니면 slick 을 만든다거나? api get/post 받는 다거나 이런 건 많이 해봐서

이제 뚝딱뚝딱 해낼 수 있는데,

React 로 연산이나, 수식 계산, 연산자쪽에서 많이 막히는 거 같네요..

제로초(조현영)

지식공유자

이런 식으로 넣으시면 됩니다. 너무 어렵게 생각하시는 것 같은데요. jsx에서 자바스크립트 식은 {} 안에 쓰시면 됩니다.

인프런 커뮤니티 질문&답변

제로초님 각 id 값 마다 특정 이미지 넣기