파라미터 (2) 썸네일형 리스트형 리액트에서 게시글 목록 클릭해서 해당 게시글 상세 페이지로 이동하기 제목이 좀 길지만 쉽게 말하면 내가 게시판에 접속했는데 수많은 게시글 중 한 개의 제목을 클릭하면 해당 게시글의 상세 페이지로 넘어갈 수 있는 로직을 소개하고자 한다. 우선 나는 ReactJS와 NestJS를 이용해서 프로젝트를 진행중이다. 마이페이지에 접속하면 아래 사진과 같이 내가 작성한 피드 리스트가 보이고 피드의 제목을 클릭하면 해당 피드의 상세페이지로 접속할 수 있다. 쉽게 생각하면 각 피드의 제목마다 해당 피드의 상세 페이지의 주소를 하드코딩 해서 쉽게 페이징 기능을 구현 할 수도 있지만 이 프로젝트는 서버와의 연동을 통해 실제 게시판 서비스 처럼 생성, 조회, 수정, 삭제가 가능하도록 제작하는 것이 목표이므로 피드 리스트의 각각의 피드 제목을 클릭했을 때 해당 피드의 id를 기반으로 상세 페.. 리액트에서 useParams를 이용해 유동적으로 페이지 주소 지정하기 현재 진행중인 프로젝트에서 각 게시글 마다 상세 페이지를 보여주는 기능을 구현하게 되었다. 단순한 페이지 전환은 useNavigate로 처리하고 있었는데 UI는 동일한데 서버에서 반환하는 게시글 id마다 다른 데이터를 보여주기 위해서는 useParams에 대한 이해가 필요했다. useParams는 딱 생긴 것 대로 리액트 훅이다. 설치는 그냥 react-router-dom을 설치하면 같이 설치된다. 아래는 설치 명령어다. npm install react-router-dom 이렇게 설치하고나면 import를 해준다. import {useParams} from 'react-router-dom'; 이제 사용 준비 끝! useParams를 간단하게 알아보자면 URL을 통해 넘겨받은 파라미터 값을 해당 페이지에서.. 이전 1 다음
