Optional Chiaing, history/location/match

ym j·2021년 5월 25일

React

목록 보기

6/9

✔ 이번에는 1차 프로젝트를 진행하면서 새로 알게된 개념이나, 부족했던 개념 몇가지를 추려서 정리해보고자 한다.

Optional Chaining

조건부 렌더링 에러로 난관에 부딪히던 도중.. 갓유진님의 도움을 Optional Chaining을 알게 되었다. (모르는게 없으시네.... 👍👍👍👍👍 )

이 옵셔널 체이닝을 사용하게 되면 프로퍼티가 없는 객체에 에러없이 안전하게 접근할 수 있다.

let user = {}; // 주소 정보가 없는 사용자

alert(user.address.street); // Uncaught TypeError: Cannot read property 'street' of undefined

alert(user?.address.street); // 에러 x, undefined

?. 앞의 평가 대상이 undefined이거나 null이면 에러가 아닌 undefined를 반환한다.
원래는 논리 연산자인 &&를 통해 조건부 렌더링에 사용하였지만, 코드가 너무 길어진다는 단점이 생겨 옵셔널 체이닝 도입 후 이를 사용하게 되었다. 하지만 이러한 옵셔널 체이닝도 남용해서는 안된다고 한다. 그 이유는 에러를 반환하지 못하기 때문에 디버깅에 어려움이 많아져, 반드시 존재하지 않아도 괜찮은 대상에만 사용해야 한다는 점이 존재한다.

history, location, match

브라우저와 리액트에서 제공하는 router를 연결하게 되면, 라우터가 history api에 접근할 수 있게 되며 연결된 각각의 컴포넌트들은 history, location, match 객체를 props로 제공받는다. 단, 직접적으로 Route 컴포넌트에 경로가 지정이 되지 않은 컴포넌트는, withRouter를 통해 props로 3가지 객체를 받을 수 있다.
(이때 일반적으로 우리가 사용하는 Router는 동적인 페이지를 제작하므로 BrowserRouter가 보편적으로 사용된다.)

export default Routes class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Navbar />
        <Switch>
          <Route exact path="/" component={Main}></Route>
          <Route exact path="/detail/:id" component={MovieDetail}></Route>
          <Route exact path="/review" component={ReviewPage}></Route>
          <Route exact path="/mypage" component={MyPage}></Route>;
          <Route exact path="/mytest" component={AnalyzeTest}></Route>;
        </Switch>
        <Footer />
      </Router>
    );
  }
}