11.13.22{코딩일기}벨로퍼트와 함께하는 모던리액트 5-4 챕터리뷰

[ 새롭게 알게된 것 ]

---

1.useNavigate는 react-router-dom v5의 history객체 기능을 대체함

---

뒤로가기, 특정경로 이동, 이탈 방지 기능구현시 컴포넌트 내부 메소드에서 라우트를 직접 접근해 구현 가능함

---

 

2. react-router-dom v6에선 withRouter Hoc 지원 안됨

---

만약 사용하면 컴파일 에러발생함

대신 useNavigation, useSearch, useParam을 활용해 라우트 컴포넌트가 아닌곳에도 활용가능함

---

 

3.Hoc(High order component)와 커스텀 Hook의 차이

---

Hoc은  React 구성적 특성에 나오는 패턴임

export default MyComponent(addedComponent);

하지만 중복되는 로직을 줄일 수 있는 장점이 있는 패턴이 있지만 암시적인 데이터를 사용하므로 데이터가 어디서 넘어오는지 불명확함.

대신 Hoc 패턴이 아닌, 커스텀 hook을 사용하게 되면 어디서 파라미터를 넘기는지 명확해지는 장점이 있음.

상황에 따라 Hoc 패턴을 사용하면 됨

---