상권's
TIL 25 (2021.10.31) 본문
Array.prototype.find()
find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.
찾은 요소의 값 대신 인덱스를 반환하는 findIndex() 메서드도 살펴보세요.
배열 요소의 위치를 찾고자 하는 경우에는 Array.prototype.indexOf()를 사용하세요.
배열 요소가 해당 배열에 존재하는지 확인하고자 하는 경우에는 Array.prototype.indexOf() 또는 Array.prototype.includes()를 사용세요.
구문
arr.find(callback[, thisArg])
매개변수
callback배열의 각 값에 대해 실행할 함수. 아래의 세 인자를 받습니다.
사용 방법은 아래의 코드에서 확인해보겠습니다.
useParams 출처
useParams returns an object of key/value pairs of URL parameters. Use it to access match.params of the current <Route>.
useParams는 URL 파라미터를 키/ 벨류 객체 형태로 리턴합니다. 파라미터와 동일한 페이지를 라우트할 때 사용할 수 있습니다.
예제
App.js의 일부
</Route>
<Route path="/detail/:id">
{/* detail page에서 해당 파라미터 값에 맞는 상품을 보여주기 위해서 :id를 사용한다. => 이 경우 detail/ 뒤에 아무 문자가 들어올 수 있다. */}
<Detail shoes={shoes}/>
</Route>
{/* <Route path='/:id'> */}
{/* /:id는 /모든문자라는 뜻 => 이 경우에 /detail과 겹쳐서 아무거나 보여주세요가 디테일에서도 보인다. => switch로 해결 가능*/}
{/* <div> 아무거나 보여주세요. </div> </Route> */}
</Switch>
{/* path가 여러개가 맞아도 하나만 보여줄 수 있다. */}
</div>
Detail.js의 일부
let = { id } = useParams(); // useParams() 라는 함수는 현재 URL에 적힌 모든 파라미터를 {파라미터1,파라미터2} 이런 식으로 저장 => 여기 id는 App에서 :id와 동일한 값.
let 찾은상품 = props.shoes.find(function(상품){ // 가격별로 정렬할 경우, 상품 목록의 순서가 바뀌기 때문에,
return 상품.id == id // 입력되는 파라미터(:id)와 상품 정보 중 id 가 동일한 상품만 불러온다.
});
let history = useHistory(); // react-router-dom에서 제공하는 hook => 방문 기록 등을 저장해놓는 object
라우트 되는 페이지에 가서 useParams를 이용해서/ :id로 들어오는 값을 변수(id)에 저장해주고, 본문에서 이용할 수 있습니다.
위 코드는 파라미터로 입력되는 값이랑 상품 목록의 id가 동일한 상품만 렌더링 될 수 있도록, find함수를 이용했습니다.
useHistory 출처
The useHistory hook gives you access to the history instance that you may use to navigate.
useHistory 후크를 사용하면 탐색에 사용할 수 있는 history 인스턴스에 액세스할 수 있습니다.
바로 위의 코드에서 볼 수 있는 것 처럼 useHistory를 history에 할당해준 뒤,
<button className="btn btn-danger" onClick={()=> {
history.goBack() // 뒤로가기 기능 history.push('/') => 특정 경로로 이동 가능
history.goBack을 통해서 직전에 방문했던 페이지로 방문할 수 있으며,
history.push를 이용하면 특정 사이트로 이동할 수 있습니다.
'~2022 작성 글 > TIL' 카테고리의 다른 글
TIL 27 (2021.11.02) (0) | 2021.11.02 |
---|---|
TIL 26 (Redux) (2021.11.01) (0) | 2021.11.01 |
TIL 24 (클로저 함수)(2021.10.30) (0) | 2021.10.30 |
TIL 23 (2021.10.29) (0) | 2021.10.29 |
TIL 22 (2021.10.28) (0) | 2021.10.28 |