221012 메가박스 리액트 - 리스트 4개만 출력하기

탭메뉴의 컨텐츠들을 컴포넌트로 만들어 스토어 페이지 첫 화면에 모두 볼 수 있도록 합니다.

"더보기"를 누르면 해당 컨텐츠의 탭으로이동합니다.

현재 메가티켓 탭의 경우에는 5개 이상의 컨텐츠가 있는데, 

본 페이지에서는 4개까지만 표시하기위해서서 컴포넌트에 props로 숫자 4를 전달합니다.

 

                    <Route path="/newitem" element={<NewItem num={4} />} />

 

 

 

삼항연산자를 이용하여 num !== 4에 해당하는 경우엔 전체 리스트를 나타나도록 하고,

그렇지 않은 경우에는 리스트를 4개만 나타나도록 합니다.

                {num !== 4 ? (

                    <p>

                        전체 <span>{MEGAPICKDATA.length}</span>건

                    </p>

                ) : (

                    ""

                )}

                <Events MEGAPICKDATA={MEGAPICKDATA} num={num} />

---

다른 페이지에서도 같은 방식으로 삼항연산자를 이용해 조건에 따라서 전체 몇 건의 리스트가 있는지 나타나도록 합니다. 

            <div className="container">

                {num !== 4 ? (

                    <p>

                        전체 <span>{MEGAPICKDATA.length}</span>건

                    </p>

                ) : (

                    ""

                )}

                <Events MEGAPICKDATA={MEGAPICKDATA} num={num} />

            </div>