2024.01.31 TIL

 

router, param으로 동적 페이지 이동하기

<Route
          path="details/:id"
          element={<LetterDetailPage savedLetters={savedLetters} />}
        />

/: 뒤에 값을 지정하면 슬래쉬 어떤 값이 들어오든 details 라는 하위페이지로 이동하게 된다.

id라고 적어주는 값은 슬래쉬 뒤에 들어온 값을 id로 지칭하겠다는 의미이다.

<ViewDetails onClick={() => navigate(`/details/${item.id}`)}>상세보기</ViewDetails>

그런 다음 details 페이지로 넘어가는 버튼(링크) 역할을 하는 요소에 navigate를 줄때 param 부분에 요소의 id값을 가지고 넘어가도록 작성하면

하위페이지

하위페이지에서는 이런식으로 주소가 설정된다.

const param = useParams();

따라서 하위페이지에서는 id라고 지칭한 부분을 usePrams를 통해 받아옴으로써 클릭한 요소의 id값을 알 수 있다.

 

//클릭한 요소만 출력되게
{savedLetters.filter((item) => item.id === param.id)

그 후에 저장된 데이터 배열들과 param의 id값을 비교하여 클릭한 요소의 데이터만 출력하는 등 원하는대로 데이터를 가공하여 사용할 수 있다.

 

---

redux 이해하기

dispatch(minusNum(number))

dispatch에 number라는 payload를 넘겨주고

 

export const plusNum = (payload) => {
  return {
    type: PLUS_NUM,
    payload,
  };
};

action creator에서 payload를 지정해준다.

 

case PLUS_NUM:
      return {
        ...state,
        globalNumber: state.globalNumber + action.payload,
        //payload로 app.jsx의 값 받아오기
      };

리듀서에서 받아온 payload의 값을 활용할 수 있다.

 

주의. useDispatch나 useSelector는 react-redux에서 import해야한다.

import { useDispatch } from 'react-redux';