React - Hook _useParams

금일 , 쇼핑몰 페이지를 구축하는 과정중

• useParams()
• filter()
• map()
  에 대한 이해를 적어보고자 한다.

1.useParams

• 이는 상세페이지와 같이 많은 페이지가 필요할 경우 , 이를 좀 더 쉽게 할 수 있는 환경을 제공해주는 Hook이다

조금 더 자세하게 설명해보자면 ,

useParams는

url의 값을 따와서 쓸 수 있게끔 해주는 것이라고 말할 수 있다.

예로 , localhost:3000/welcome 과 같은 주소를 가지고 있는 page가 있다고 하였을때

Routing해주는 페이지 == app.js ,routing.js와 같은 페이지에서

<Route path ="/welcome/:word">
	<Welcome/>
</Route>

를 해준다면 , 추후 useParams를 사용하여 뒤에 :word를 사용할 수 있게 된다.

사용 방법은
사용하고자 하는 페이지에서 예) Welcome.js 에서

-1

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

-2

const {word} = useParams();

이때 {} 안에 들어있는 변수명은 :뒤에 있던 것과 동일하게 해준다.

그렇다면 이제 :word에 있던 word값이 word에 담기게 되고

사용하고 싶은 공간에 이를 활용하면 된다.

이렇게 되면 , 예로 쇼핑몰 사이트에서 사용자가 검색한 "nike"또는 "adidas"와 같은 브랜드에 해당하는 옷만 선택되어 화면에 보여지게 할 수 있다.

물론 , 이렇게 하기 위해서는 몇가지의 추가 함수들이 필요하다
다만 , 이는 onclick 또는 useState를 이용하는 방법이니 생략하다록 하겠다.

2. filter()

• filter() 기능 또한 정말 중요하다고 생각된다.
  데이터를 받아오고 나서 가공할떄 사용된다고 생각되며 , 이는 프론트엔드에서 데이터 전처리 파트라고도 생각이된다.
  즉, 자신의 필요성에 맞게 사용할 수 있게 해주는 것이다.

이를 이용하여 , 사용자가 입력한 brand 이름과 여러 상품들 중에서의 brandname이 일치할 경우 그 상품들에 대한 정보를 화면에 보이게끔 해보았다.

const fil = Data.filter((Data) => Data.brandname.includes("adidas"))

와 같은 방법으로 사용하면 된다.

여기서 Data = 데이터가 저장되어있는 변수라고 생각하면 되고 ,
includes("adidas")는 Data.brandname(컬럼)에서 adidas가 있는 것만 선택된다는 것을 의미한다.

3. map()

map() 함수 또한 자주 사용되는 함수로 ,

이는 for문을 쉽게 사용할 수 있는 javascript함수이다.
즉 , 추출하고 싶은 것들을 처음부터 끝까지 돌면서 추출해주는 기능이다.

{fil.map((fils) => <li key = {fils.idx}>
	{fils.idx}
    {fils.price}
    {fils.brandname}</li>)}

이렇게 사용하게 되면 , fil에 들어있는 데이터 값들을 key값은 idx로 하며 추출하고 싶은 idx,brandname,price를 순서대로 하나하나 추출하여 화면에 띄워지게 된다.

이렇게 , useParams, filter, map에 대해 학습을 해보았다.

더 나은 개발이 되길 바라며:)