[React] Link를 통해 props 전달하기

게시판 목록 / 상세 내용 페이지를 따로 만들어
목록의 게시물을 클릭하면 id를 상세 내용 페이지로 보내 해당 id에 맞는 content가 렌더링 되게 하도록 하였다.

그러기 위해서는 게시물을 클릭했을 때 페이지 넘김과 props 전달 (id 값)이 동시에 되어야했고
Link를 통해서 구현할 수 있었다

react-router-dom 이 v5 까지는 Link to 안에 props 값을 넘겨줄 수 있었는데 v6 로 업데이트 되면서 props로 값을 넘겨줄 수 없게되었다

따라서 Link 를 통해 값을 넘겨주고자 할 때는 state 를 사용해야한다

<Link to="/NoticeRead" state={{data: item.Id}}>
	<td> {sample.title}</td>
</Link>

Link to 에 이동하고자 하는 주소 경로를 작성하고, 그 경로에 넘겨줄 값은 위 코드 처럼 state 안에 작성해주면 된다
중괄호 두 개 작성하는 것을 주의하도록 하자

그리고 state로 넘겨준 값을 받는 파일에서는 useLocation을 이용해 받을 수 있다

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

const location=useLocation();
const id=location.state;
    
console.log(id);

useLocation을 통해 먼저 location을 선언해주고 id 에 state 값을 가져온다

---

별개로 게시판 글쓰기 페이지를 렌더링할때 Link를 통해 글쓰기 페이지로 이동되도록 하였는데
title 만 props 로 전달받아 바꾸고 싶었는데 위 기능으로 해결했다 !

공지사항 글쓰기 페이지로 예를 든다면

<Link to="/Editor" state={{data:"공지사항"}}>
	글쓰기
</Link>

글쓰기 버튼을 누르면 Editor 페이지로 이동하고, data 값으로 "공지사항" 이라는 문자열을 넘겨준다

그럼 Editor.js 에서는

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

const location=useLocation();
const title=location.state.data;

    return (
            <div> 
                <h1>{title}</h1>
                <hr className="hr"></hr>
            </div>
    )

넘겨받은 data 값을 title로 선언하고 제목으로 렌더링 할 수 있는것이다

이 방법을 쓰면 다른 페이지의 글쓰기 기능들도 각 페이지에 맞게 문자열(title)만 다르게 넣어주면  하나의 Editor.js 파일로 사용할 수 있다.

---

만약 여러 값을 props로 넘겨주고 싶다면 

//넘겨주는.js

<Link to="/NoticeRead" state={{Id: Id, boardType: boardType}}>
	<td> {title}</td>
</Link>


//받는.js

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

const location = useLocation();
const id = location.state.id;
const boardType = location.state.boardType;

이렇게 state 에 여러개를 써주면 된다

 

오늘 알게된 Link props 기능은 앞으로도 유용히 쓸 것 같다 !!