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를 이용하면 특정 사이트로 이동할 수 있습니다.