코드숨 리액트 6기 6주차 회고

routing path

페이지 별로 만든 Page component를 Route 컴포넌트로 uri path와 연결시켜주면 Link 컴포넌트를 사용하여 페이지간 이동이 가능합니다.

// webpck.config.jsmoduel.exports = {
// ...
devServer: {
historyApiFallback: {
index: 'index.html',
},
},
// ...
}

Page 컴포넌트

이전까지 단일 페이지에서 동작하는 앱을 FLUX 패턴으로 구현하다가 이번 수업부터 새로 routing과 여러 page들이 생겨나면서 Page 컴포넌트를 새로 만들게 되었고, 기존에 존재하는 Container 컴포넌트와 역할을 어떻게 분배해야 할지에 대한 고민이 있었습니다. 처음 시도할때는 컴포넌트가 너무 잘게 쪼개지면 depth가 너무 깊어질것 같아서 Container 컴포넌트의 역할을 Page 컴포넌트에서 함께 해주도록 구현했지만 결국에는 둘의 역할을 명확히 분리하는것이 테스트 코드 작성에도 용이하고, 재사용성 측면에서도 유리하겠다는 결론에 도달했습니다.

Page

  1. 유저의 권한 체크: 요청을 보낸 클라이언트가 해당 페이지에 접근할 권한이 있는지 확인하여 권한이 없다면 로그인 페이지로 redirect 또는 Container에 권한 없는 유저라는 데이터 전달
  2. uri query parameter에서 필요한 데이터 추출
  3. Container에 전달할 데이터를 service에서 조회
  4. Container에서 필요한 데이터를 props로 전달

Container

  1. props로 전달 받은 데이터를 기반으로 state(또는 store) 초기화 및 update
  2. event handler 생성
  3. Presenter에서 필요한 데이터를 props로 전달

Presenter

  1. props로 전달 받은 데이터를 기반으로 화면 렌더링
  • Page의 3번: service를 통해서 화면에 필요한 데이터를 가져오는 역할
  • Container 1번: state 초기화 및 update

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store