리액트 훅(Hooks) 기초 설명과 예제

리액트 훅(Hooks) 기초 및 활용 방법

리액트(React)로 개발을 진행할 때, 페이지 간 이동이나 데이터 처리를 위해 URL 파라미터를 사용하는 경우가 빈번합니다. 특히, 사용자에게 동적이고 유연한 경험을 제공하기 위해서는 URL 파라미터의 적절한 활용이 중요합니다. 이를 통해 애플리케이션의 기능을 확장하고 풍부한 사용자 인터페이스를 구축할 수 있습니다. 초보자 분들이라면 이러한 내용이 다소 혼란스러울 수 있습니다. 이번 포스팅에서는 리액트에서 URL 파라미터를 다루는 방법에 대해 자세히 설명드리겠습니다.

리액트 라우터와 URL 파라미터

리액트에서 URL 파라미터를 관리하는 가장 일반적인 방법은 React Router라는 라이브러리를 사용하는 것입니다. 이 라이브러리는 리액트 애플리케이션의 라우팅을 관리하며, URL 경로에 따라 적절한 컴포넌트를 렌더링하는 역할을 합니다. 오늘 주로 다룰 훅은 React Router에서 제공하는 useParams입니다. 이 훅은 동적인 URL 파라미터 값을 추출하여 사용할 수 있게 해줍니다. URL 경로의 동적 파라미터는 주로 ‘:’로 시작하여 나타납니다.

예를 들어, ‘users/:id’라는 경로에서 ‘:id’는 사용자 ID를 의미하는 동적 파라미터입니다. 이때 useParams 훅을 활용하면 해당 값을 쉽게 추출할 수 있습니다.

useParams 훅 사용 예제

그럼 실제로 useParams 훅을 어떻게 사용할 수 있는지 간단한 예제를 통해 알아보겠습니다.

import { useParams } from "react-router-dom";
function UserProfile() {
 const { id } = useParams(); // URL에서 id 추출
 return 
User ID: {id}
; 
}

위 코드에서 UserProfile 컴포넌트는 URL로부터 ‘id’ 값을 추출하여 화면에 표시합니다. 이처럼 useParams 훅을 사용하면 코드가 간결해지고 가독성이 향상됩니다.

useLocation 훅과 쿼리 스트링

URL 파라미터 외에도 쿼리 스트링을 통해 추가적인 정보를 제공할 수 있습니다. 쿼리 스트링은 ‘?’로 시작하여 키-값 쌍의 형태로 주어진 정보입니다. 예를 들어, ‘search?query=react&page=2’와 같은 URL이 있을 때, ‘query’와 ‘page’가 쿼리 스트링입니다.

쿼리 스트링을 다루는 useLocation 훅

React Router에서는 현재 URL의 정보를 가져오는 useLocation 훅을 제공합니다. 이 훅을 통해 URL의 쿼리 스트링을 간편하게 파싱할 수 있습니다.

import { useLocation } from "react-router-dom";
function About() {
 const location = useLocation();
 const queryParams = new URLSearchParams(location.search); // 쿼리 스트링 파싱
 const detail = queryParams.get('detail'); // 'detail' 파라미터 값 추출
 return 
Detail: {detail}
;
}

위의 예제에서는 useLocation 훅을 통해 쿼리 스트링을 가져오고, URLSearchParams 객체를 사용하여 파라미터 값을 추출합니다. 이러한 방식으로 쿼리 스트링을 처리하면 유연하게 정보를 관리할 수 있습니다.

쿼리 스트링 처리 시 유의할 점

쿼리 스트링을 다룰 때는 다음과 같은 점에 유의해야 합니다:

• 데이터 유효성 검사: 쿼리 스트링에서 가져온 값은 변별력을 위해 유효성을 반드시 검사해야 합니다.
• 보안 문제: 사용자의 민감한 정보는 쿼리 스트링에 포함하지 않아야 안전합니다.

URL 파라미터 활용 사례

URL 파라미터는 매우 다양한 방식으로 활용될 수 있습니다. 몇 가지 활용 예시는 다음과 같습니다:

• 사용자 프로필 페이지: ‘/users/:id’ 경로를 통해 특정 사용자 정보를 보여줄 수 있습니다.
• 게시글 상세 페이지: ‘/posts/:postId’ 경로를 통해 특정 게시글 내용에 접근할 수 있습니다.
• 검색 결과 페이지: ‘/search?query=react&page=2’를 통해 사용자가 입력한 검색어와 페이지 번호에 따라 결과를 표시합니다.

자주 하는 질문 (FAQ)

Q1. useParams와 useLocation 훅의 차이점은 무엇인가요?

A1. useParams 훅은 URL 경로에서 동적 파라미터를 추출할 때 사용되고, useLocation 훅은 URL의 쿼리 스트링을 처리하는 데 유용합니다.

Q2. React Router를 사용하는 이유는 무엇인가요?

A2. React Router는 리액트 애플리케이션의 라우팅을 쉽게 관리할 수 있게 해주는 라이브러리로, URL 경로에 따라 적절한 컴포넌트를 렌더링하는 데 필수적입니다.

Q3. 쿼리 스트링에 민감한 정보를 포함해도 괜찮나요?

A3. 쿼리 스트링에는 사용자의 개인 정보나 중요한 데이터를 포함하지 않는 것이 가장 안전합니다. URL에 쉽게 노출되기 때문입니다.

마무리

이번 포스팅에서는 리액트에서 URL 파라미터와 관련된 내용을 다뤄보았습니다. useParams와 useLocation 훅을 효과적으로 활용하면, 애플리케이션의 라우팅 기능을 강화하고 사용자에게 더욱 다채로운 경험을 제공할 수 있습니다. 이 글이 리액트 개발에서 URL 파라미터를 이해하고 활용하는 데 도움이 되길 바랍니다.

리액트 프로그래밍에 대한 더 많은 정보를 원하시면 지속적으로 블로그를 방문해 주세요!

자주 찾는 질문 Q&A