개발일기

React - useParams 사용법 본문

Javascript/React.js

React - useParams 사용법

Flashback 2022. 4. 15. 17:54
728x90
반응형

1. useParams란?

useParams는 리액트에서 제공하는 Hook으로 동적으로 라우팅을 생성하기 위해 사용한다.

URL에 포함되어있는 Key, Value 형식의 객체를 반환해주는 역할을 한다. Route 부분에서 Key를 지정해주고, 해당하는 Key에 적합한 Value를 넣어 URL을 변경시키면, useParams를 통해 Key, Value 객체를 반환받아 확인할 수 있다. 반환받은 Value를 통해 게시글을 불러오거나, 검색목록을 변경시키는 등 다양한 기능으로 확장시켜 사용할 수 있다.

 

2. 관련 라이브러리 설치

2-1. package.json 생성

npm init -y
yarn init -y
# package.json 생성

 

2-2. react 관련 패키지 설치

npm install react react-dom react-route react-router-dom@5.3.0
yarn add react react-dom react-route react-router-dom@5.3.0

현재 시점으로 react-router-dom은 6이상의 버전이 출시되었다. 5버전을 기준으로 한 현재 코드와 꼬임을 방지하기 위해서 5.3.0 버전으로 버전명으로 명시하여 설치하였다.

 

2-3. webpack 설치

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin
yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin

 

2-4. babel 설치

npm install @babel/core @babel/preset-env @babel/preset-env babel-loader
yarn add @babel/core @babel/preset-env @babel/preset-env babel-loader

 

3. 소스코드 설정

3-1. webpack설정

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './index.js',
   output: {
	  path: path.join(__dirname, './bundle'),
	  filename: 'index_bundle.js',
	  publicPath: '/'
   },
   devServer: {
	  port: 8001,
	  historyApiFallback: true,
      // SPA로 개발하기에 이 옵션을 추가해줘야 한다.
      // url변동이 있는 히스토리API를 사용하여 useParams결과를 확인하기 때문에
      // 페이지를 이동시키고 결과를 확인하기 위해서는 추가해야 하는 옵션이다.
   },
   module: {
	  rules: [
		 {
			test: /\.js?$/,
			exclude: /node_modules/,
			loader: 'babel-loader'
		 }
	  ]
   },
   plugins:[
	  new HtmlWebpackPlugin({
		 name: "index.html",
		 inject: false,
		 template: './index.html',
		 publicPath: '/'
	  })
   ]
}

지난번 포스팅과 웹팩 설정은 비슷하지만 devServer에 historyAPIFallback이라는 옵션이 추가되어있다. 해당 옵션을 추가해야지만 Route로 페이지를 이동시킬 때, 'Cannot get /~ '에러가 발생하지 않고 컴포넌트가 정상적으로 렌더링되는 것을 확인할 수 있다.

 

3-2. babel설정

module.exports = {
	presets: [
	  '@babel/preset-env',
	  '@babel/preset-react',
	],
  }

 

3-3. index.html 생성

<!DOCTYPE html>
<html lang = "en">
   <head>
	  <meta charset = "UTF-8">
	  <title>React App</title>
   </head>
   <body>
	  <div id = "root"></div>
	  <script src = '/index_bundle.js'></script>
   </body>
</html>

 

3-4. index.js 생성

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './apps/App';

ReactDOM.render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>,
  document.getElementById("root")
);

BrowserRouter로 App컴포너트를 감싸줘야 한다. BrowserRouter란 히스토리API를 사용하여 해당하는 URL에 일치하는 컴포넌트를 보여주도록 하기 위해 사용된다.

 

4. 라우트 및 컴포넌트 생성

4-1. App.js 생성

// apps/App.js

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import MainComponent from './MainComponent';
import TestComponent from './TestComponent';

const App = () => {
	return (
		<Switch>
			<Route path="/test/:id" component={ TestComponent } />
			<Route exact path="/" component={ MainComponent } />
			
		</Switch>
	)
}

export default App;

여기서 Route의 path옵션에 : 가 붙은 것을 확인할 수 있다. 여기서 :id는 다른 라우트의 일반 주소와는 달리 변수로 취급된다. useParams의 URL은 Key, Value 형식으로 짝지어 들어가기 때문에 숫자를 넣든 문자를 넣어 주소를 이동시킬 수 있다. 만약 URL이 /test/1인 경우 TestComponent가 렌더링 된다. /test/span처럼 문자를 넣은 경우에도 TestComponent가 렌더링 된다.

 

4-2. MainComponent.js 생성

// apps/MainComponent.js

import React from 'react';

const MainComponent = () => {
	return (
		<div>
			MainComponent123
		</div>
	)
}

export default MainComponent;

 

4-3. TestComponent생성

// apps/TestComponent.js

import React from 'react';
import { useParams } from 'react-router-dom';

const TestComponent = () => {
	const params = useParams();
	console.log("params : ", params);
	return (
		<div>
			TestComponent123
		</div>
	)
}

export default TestComponent;

useParams로 /test/:id 형식의 URL로 이동한 경우, 볼수 있는 컴포넌트이다. Key, Value 형식으로 주소값이 들어가기 때문에, useParams를 재정의한 params를 콘솔에 찍어보면 Key, Value 형식의 결과를 확인할 수 있다.

/test/3 주소로 이동한 경우 params : > { id : '3' } 를 확인할 수 있고, /test/something주소로 이동한 경우 params : > { id : 'something' }을 확인할 수 있다.

 

 

useParams 사용법

https://v5.reactrouter.com/web/api/Hooks/useparams

 

Declarative routing for React apps at any scale | React Router

Version 6 of React Router is here! React Router v6 takes the best features from v3, v5, and its sister project, Reach Router, in our smallest and most powerful package yet.

reactrouter.com

 

react-router v5와 v6의 차이

https://reactrouter.com/docs/en/v6/upgrading/v5

 

React Router | Upgrading from v5

Declarative routing for React apps at any scale

reactrouter.com

 

728x90
반응형

'Javascript > React.js' 카테고리의 다른 글

React - Redux persist를 활용한 리덕스 상태값 유지  (0) 2022.07.30
React - configureStore를 사용한 스토어 생성  (0) 2022.07.25
React - useHistory 사용법  (0) 2022.04.14
React - Socket.io client/server 활용법  (0) 2022.04.13
React - React DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node 에러  (0) 2022.04.06
'Javascript/React.js' Related Articles more
Comments