동기

올려진 게시물에 답글 혹은 댓글을 작성하고, 메시지 상세 화면에서 확인할 수 있게 구현하려고 했다. 이 과정에서 React Router를 주요하게 사용하였다.

구현

[Detail.js]

// react-router hooks
import {useParams} from 'react-router-dom';

// 생략

const Detail = (props)=>{
    // Data State
    const [data, setData] = useState([]);

    // Client URL params
    const params = useParams();
    const serverHost = "http://localhost:4000";

    // Request data to Server
    const getDetail= async ()=>{
        const result = await axios.get(`${serverHost}/detail/${params._id}`)
        .then(result=>result)
        .catch(err=>err)
        
        if(result.status === 200) setData(result.data);
        else return;
    }

    // Page Rendering
    useEffect(()=>{
        getDetail();
    },[params])

    return (
        <div className="wrapper" aria-label="plaza">
            <div className="content-width">
                <div className="box-colored" aria-label="title">
                    <div className="p-4 text-xl text-center">ZET</div>
                </div>
            </div>
            <div className="content-width">
                {
                    data.map((message)=>{
                        return <Message key={message._id} message={message}></Message>
                    })
                }
            </div>
      </div>
    )
}

export default Detail;

위의 코드에서 살펴볼 것은 useParams 사용이다. useParams를 통해서 현재 브라우저 상에서 변화하는 URL을 추적할 수 있다.
만약 http://domain.io/user/1과 http://domain.io/user/2가 있다면 useParams를 통해서 숫자 1, 2를 가져올 수 있다. 하지만 useParams만 사용한다고 되는 것은 아니다. 이 부분의 설명은 아래에서 하도록 하겠다.
useEffect를 통해서 params가 바뀔 때마다 서버에 새로운 데이터를 요청하여 data를 불러오게 했고, data가 수정되면서 Detail 페이지가 리렌더링 되게 만들었다.

[App.js 라우터 부분]

function App() {
  // 생략

  return (
    <div className="App">
      <Navbar></Navbar>
      <Routes>
        <Route path="/" element={<Plaza/>} /> 
        <Route path="/mypage" element={<Mypage/>} />
        <Route path="/login" element={<Login></Login>}></Route>
                                      
        <Route path="/detail/:_id" element={<Detail />}></Route>

      </Routes>
    </div>
  );
}

이전에 useParams 만으로는 URL에서 원하는 변경값을 찾을 수 없다고 얘기했다. 사실 이 Params를 인식할 수 있게 하는 것은, Route에서 path를 지정할 때 :(콜론) 뒤에 오는 식별자이다. Detail.js에서 params._id를 통해 메세지 ID값을 가져올 수 있었던 이유는 바로 Detail 페이지로 라우팅을 해주는 Route 덕분이다.

[Message.js 링크 부분]

const Message = (props)=>{
  const {message} = props;
  // 생략
  return (
  // 생략
    <Link className="message-body" to={"/detail/"+message._id}>
    // 생략
    </Link>
  )
}

클라이언트 입장에서 어떤 메시지를 눌렀을 때 URL을 변경시키게 하는 것은 Link 덕분이다. to 프로퍼티에 지정해주는 데로 URL을 바꿔준다.

정리
1. Link의 to에서 지정해준데로 브라우저 URL 변경
2. Route가 변경된 URL에 해당하는 페이지를 불러오고, params를 인식.
3. useParams가 최종적으로 URL의 params를 코드로 불러와 사용할 수 있게 함.

개선할 점

• react-router 업데이트로 새로운 기능들이 많이 추가되었다. 특히 data Router 같은 경우는 컴포넌트가 마운팅 되기 이전에 데이터를 불러오는 기능을 제공하는 것 같다. 만약 프로젝트에 사용하게 된다면 살펴보는 것도 좋을 것 같다.