1. 페이지를 이동하면서 값 전달하기

---

• 부모에서 자식 컴포넌트로 값을 전달해야 하는 상황에서는 보통 props를 통해 전달한다. 자식 컴포넌트가 아닌 페이지를 이동하면서 다른 컴포넌트에 값을 전달해야 하는 경우 부모와 자식 관계가 아니기 때문에 다른 방법을 사용해야 한다.

• 이때 사용하는 방법이 값을 전달해줄 페이지에서 useNavigate()로 값을 전달해주고, 값을 받을 페이지에서 useLocation()으로 값을 받는 방법이다.

1) useNavigate

• Link와 다른 점은 함수 호출을 통해 페이지를 이동하기 때문에 특정 조건을 충족할 경우에 페이지 이동을 하도록 할 수 있다.

기본 구문

const navigate = useNavigate();

navigate('/이동할 페이지 주소', 전달할 값)

1-1. import 및 변수에 할당

• React Router에서 useNavigate를 가져온다.

import { useNavigate } from 'react-router-dom';

• 사용하기 쉽도록 useNavigate() 함수를 변수에 할당한다.

const navigate = useNavigate();

1-2. 다른 페이지로 이동

  const reload = () => {
    navigate(0);  // 새로 고침
  }

  const back = () => {
    navigate(-1);  // 뒤로 가기
  }
  const forward = () => {
    navigate(1);  // 앞으로 가기
  }
  const home = () => {
    navigate('/');  // 메인 페이지로 가기
  }
  
// on Click event로 호출한 경우
<button onClick={reload}>새로고침</button>
<button onClick={back}>뒤로가기</button>
<button onClick={forward}>앞으로가기</button>
<button onClick={home}>홈 화면으로 가기</button>

1-3. 다른 페이지로 값 전달하기

• state를 사용한다면 navigate(/이동할 페이지 주소, { state: { 키: 값 } }) 의 형태로도 가능하다. to는 <Link>에서 사용한 to=''와 동일한 내용.(가고자 하는 url을 넣으면 된다)

• 만약 replace 기능이 필요하다면, navigate(to, { replace: true })의 형태로 사용할 수 있다.

// 부모 컴포넌트
function ContentList() {
  const [contentData, setContentData] = useState<ContentData[]>([]);

  const getContentData = async () => {
    try {
      const res = await axios.get("http://localhost:3001/contents");
      setContentData(res.data);
    } catch (err) {
      console.error(err);
    }
  };
  useEffect(() => {
    getContentData();
  }, []);

  return (
    <ListContainer>
      <ListArea>
        <List>
          {contentData.map((value) => {
            return <ContentItem key={value.id} list={value} />;
          })}
        </List>
      </ListArea>
    </ListContainer>
  );
}

export default ContentList;

• 부모 컴포넌트로 부터 props로 받은 list를 detail 페이지에서 값을 받을 수 있도록 navigate의 두 번째 인자로 전달한다.

// 자식 컴포넌트
function ContentItem({ list }: ContentDataProps) {
  const navigate = useNavigate();

  const moveDetailPage = () => {
    navigate(`/library/content/${list.id}`, {
      // navigate의 두 번째 인자로 전달한 값을 state로 지정한다.
      state: {
        list,
      },
    });
  };

  return (
    <ItemContainer onClick={moveDetailPage}>
      <ItemTitle>{list.title}</ItemTitle>
      <LikeButton>❤️ {list.likes}</LikeButton>
    </ItemContainer>
  );
}

export default ContentItem;

2) useLocation

• usLocation()을 통해 이동한 페이지에서 전달 받은 값을 받아온다.

2-1. import 및 변수에 할당

• React Router에서 useLocation을 가져온다.

import { useLocation } from "react-router-dom";

• 사용하기 쉽도록 useLocation() 함수를 변수에 할당한다.

const location = useLocation();

2-2. 전달받은 값 불러오기

• location으로 값을 전달받게 되면 detail 페이지에서 useParams로 다시 해당 id에 해당하는 정보만 get 요청을 할 필요가 없게 된다.

import { useLocation } from "react-router-dom";

function DetailPage() {
  const location = useLocation();
  const detailData = location.state.list;

  console.log(detailData);

  return <div>{location.state.list.title}</div>;
}

export default DetailPage;