React / Redux-toolkit

React/ Redux-Toolkit을 이용한 쇼핑몰 만들기

React에 있어서 기본적으로 3가지를 기억하라고 한다. UI를 그릴때
1. html css로 디자인 미리 완성해놓고
2. UI의 현재 상태를 저장할 state 하나 만들고
3. state에 따라서 UI가 어떻게 보일지 작성한다.

이런식으로 구상하고 로직을 짜보자

쇼핑몰 페이지 만들면서 간단한 라우터를 만들어 봤다.
라우터를 나누기 위해서 . index.js에 추가해주었고

<Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
  App 을 이런식으로 감싸주었다 
  <Provider store={store}>는 state 를 전역에서 사용할 수 있도록 해준다
    
<Routes>
        <Route
          path="/"
          element={
            <>
              <div className="mainBig"></div>
              <Container>
                <Row>
                  {shoes.map((a, i) => {
                    return (
                      <ShoseList shoes={shoes[i]} key={i} i={i}></ShoseList>
                    );
                  })}
                </Row>
              </Container>
            </>
          }
        />
        <Route path="/detail/:id" element={<Detail shoes={shoes} />} />
        <Route path="/cart" element={<Cart />} />
      </Routes>

이런식으로 라우트를 나누어 보았다 . Route 란 라우터로 페이지 나눌때 사용 페이지라 생각하면 된다.
Route는 두가지 요소를 가지고 있는데 path는 주소 뒤에 붙는 페이지라 생각하면 된다 . element는 이동할 페이지라고 생각하면 된다.

페이지를 만들면서 간단한 스타일 컴포넌트를 이용하였는데 스타일 컴포넌트란 css대신 태그들의 이름을 바꾸어서 변수를 지정하여 태그에 대입하여 사용한다.
스타일 컴포넌트를 쓰는 이유는
1.다른페이지의 오염을 줄여주고,
2.페이지 로딩시간을 단축시켜서 사용한다고 한다.
하지만 나는 아직 익숙하지 않기도 하고 비교하기가 어려워 CSS를 사용하였다.

function TabContent(props) {
  let [fade, setFade] = useState("");
  useEffect(() => {
    setTimeout(() => {
      setFade("end");
    }, 100);
    return () => {
      setFade("");
    };
  }, [props.tap]);![]

 페이지를 만들면서 useEffect 를 사용하였는데 처음들어보는 훅이라 사용하는데 어려움을 겪었다 . 천천히 알고보니깐 어느정도 사용하는 의도는 알아갔다.
페이지에 장착되기도하고 (mount) 마운트될때 코드실행 페이지 열때?
가끔 업데이트도 되고 (update).   업데이트될때 코드실행 재렌더링된다는뜻 훅이 실행될떄나 재렌더링될때
필요없으면 제거된다 (unmount)  언마운트될떄 코드실행이 된다고 한다

    
일단 이런식으로어느정도 완성을 하였는데 아직 사용에 미숙하여 많이 어려움을 겪고 있다. 이번 강의를 듣고 state를 전역으로 사용하여 진짜 극한의 편리함을 느겼고 중간에 툴킷이 나와 리덕스를 사용했을때 보다 간축 되어서 조금 익숙해지니깐 많이 편하게 사용 했던거 같다.