리액트 프로젝트 1. 시작 , 페이징처리와 연산자의 사랑

app.js

 

app.js 는 연결하는 용도로 페이징 처리하는데 사용했다.

  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/*" element={<Main />} />
        <Route path="/goods/*" element={<ProductContainer />} />
        <Route path='/goods/:category' element={<ProductList />}></Route>
        <Route path="/goods/:category/:id/*" element={<ProductDetails />} />
        <Route path="/goods/:category/:id/:buy" element={<ProductBuy />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
};

 

* 의 사용으로 각자의 것만 확장하는 마지막 node 페이지는 굳이 명시하지 않고 *사용
내부적으로 Routes 와 Route의 사용으로 마지막 페이징 처리를 하였다.

사실 현재 프로젝트 내에서는 저것보다 훨씬 많다...

 

처음에 메인을 맡아준 친구가 급하게 header에서 각자 작업할 수 있도록 link를 연결해주었다.

덕분에 나의 index 페이지가 생기면서 거기서 부터 작업할 수 있었다.

 

그중의 상품관련을 맡게 된 나는 

        <Route path="/goods/*" element={<ProductContainer />} />
        <Route path='/goods/:category' element={<ProductList />}></Route>
        <Route path="/goods/:category/:id/*" element={<ProductDetails />} />
        <Route path="/goods/:category/:id/:buy" element={<ProductBuy />} />

 

4페이지에 해당하고.

goods의 index 페이지

카테고리별 goods의 List 페이지
제품 상세가 나오는 goods의 details 페이지
구매하기를 누르면 나오는 구매페이지 까지 처리하게 되었다.

 

처음에는 Route의 위치를 어디다가 놓는지 몰라 애를 먹었다.

내부적으로 놓으면 메인에서 갑자기 어디선가 뿅 나와버리고

어떻게 하는건지 제대로 파악하지 못해 여기저기 사용했던 기억이 난다.

 

분명히 Link는 잘 사용되어 url은 형성되었는데,

왜 페이지 이동이 안되지 ? 했는데 

보여주는 위치가 Main과 대치되야 하기 때문에 Main의 형제 위치로 둬야한다는것을 알게 되었고 ,

그것은 app.js 였다.

 

프로젝트 시작전에

HTML을 먼저 만들어 놓았었기 때문에 그것을 보면서 활용하니 속도가 붙었다.

페이지 이동처리가 되기 시작하니 눈에 보여서 컴포넌트를 계획하고 만들게 되었다.

 

나의 goods 페이지로 이동하게되면

가장먼저 자잘하게 연습한 컴포넌트 들이 나온다.

---

    return (
        <div className='ProductContainer' style={{ marginTop: "100px" }}>
            <h1 style={{ padding: "4%" }}>
                Choose your GOODS:
            </h1>
            <ProductMainSlide />

            <ProductMainList title='베스트 상품' sort='count' />

            <ProductMainList title='신상품' />
        </div>
    );

 

두가지의 같은 컴포넌트를 이용하였는데

컴포넌트 연습과 알아가는 개념이 되었다.

 

프롭스로 전달되어지는 값을 판별하여

배열을 다른식으로 정렬할 수 있었다.

---

 

ProductContainer - ProductMainSlide

ProductMainSlide 는 카테고리로 이어질 수 있도록 링크를 걸어두었다.

 

    return productSlide.map((image) => {               
        return (
            <Link to={`/goods/${image.category}`}  key={image.id} className="ImgSlideList"
				.......
            </Link>
        );
    });

productSlide 라는 내가 표현해줄 객체를 가공한뒤 , map을이용해 돌리면서 동적으로 url이 붙도록 하였으니

 

app.js 에도

<Route path='/goods/:category' element={<ProductList />}></Route>

변수를 사용했음을 볼 수 있다.

이는 추후 usePrams를 통해 변수값을 사용 할 수 있었다.

 

---

 

<ProductMainList title='베스트 상품' sort='count' />

 

여기는 처음에 만드는 당시에는 다음 페이지가 만들어 져있지 않기에 Link를 걸지 않았었다.

상품 나열 정도를 먼저 정리했다 컴포넌트 두개를 활용하여

똑같이 상품 객체를 map을 돌리지만 

배열의 sort메서드를 이용하여 정렬을 다르게 했다.

sort는 원본 배열이 달라지는 특성이 있다고 배운것 같아

나는 따로 복사본을 이용하여 판별하였다

    //필터를 위한 복사본 형성
    const sortItems = [...GoodsItems];

    //프롭스로 받은 값에 따라 필터링 적용
    if (sort === 'count') {
        sortItems.sort((a, b) => b.count - a.count);
    }

이렇게 되면 sortItems을 map을 돌리면

count가 없으면 GoodsItems의 복사본이 돌아갈테니까.

count가 있으면 GoodsItems내부의 속성에 count: 상수값이 존재했는데 상수값을 비교 정렬하게 되었다.

 

또 슬라이드를 구현했는데

슬라이드는 생각보다 구현이 빨리 됬다.

 

총 길이에서 내가 보여줄 길이만큼 버튼 횟수를 정해주면 되지 않을까 라는 접근을 하였고.

클릭할때마다 이동값이 배가 되기 떄문에 횟수를 받아

transform: translateX(원하는 범위 * 버튼 클릭 state값)을 해주면 될거라고 생각했다.

 

양쪽의 버튼을 콜백함수 형태로 매개변수를 보내줌으로 매개변수 값을 받아 retrun을 다르게 정의 하였다.

    //버튼을 누르면 state값 증가와 감소
    const onclickMainList = (type)=>{
        if(type ==='+'){
            if(currentSlide === maxSlide) return;
            setCurrentSlide(currentSlide+1);
        }else{
            setCurrentSlide(currentSlide-1);
        }
    }

 

슬라이드는 자바스크립때 참 힘들게 배웠던 부분인데 덕분에 처음엔 쉽게 접근했지만

나는 CSS가 너무어려웠다........

현재는 현재 보여줄 슬라이드를 상수값을 집어넣어뒀지만 ,

미디어 쿼리시 갯수가 달라지는 부분때문에 이부분은 어떻게 해야할지

자바스크립트 또는 리액트로 변수화 하여 확장해야할것 같다.

 

 

이쯤부터 내가 자주 쓰게 된 연산자는 &&연산자 또는 삼항연산자이다.

이건 정말 꿀인것 같다..

나는 &&연산자와 삼항연산자는 외계인 코드같다고 생각한 사람이였는데.

실제로 리액트를 사용하니 JSX문법상 리턴에서 조건을 걸고싶어서 걸다보니 참 많이 쓰게 되었다.

 

이 컴포넌트에서 사용은 , 리턴내에서

currentSlide>0 && <button> ...

 현재 슬라이드 버튼을 누르지 않은 최초상황에서 이버튼은 보여주지 않을래.

정도 용도로 사용해봤는데 재밌었다.

버튼을 1회 이상 누르면 등장하게 된다.

 

이미지에서도 사용했는데

내가 버튼을 hover 했을때와 마우스 아웃상태일때를 true false로 state값을 정의해놓고

true 일땐 이사진 , false 일땐 이사진으로 할게

<img src={hover ? "/사진 1" : "/사진 2" }
 	alt="right" />

 

재밌었다.

뭐든 해보면 이건 될까 ? 실험하게되고 장난반 진심반 해보면서 너무 재밌었다.

심지어 몇일전엔 className 에도 가능하더라..

 

 

다음 상품 리스트부터 점점 욕심과 욕망이 생기면서 대환장 파티가 시작된다..