[React] 쏟아지는 페이지 관리하기

https://www.youtube.com/watch?v=NwLWX2RNVcw&t=319s

* 본 포스팅은 해당 영상의 요약본이자 공부한 내용의 압축이므로

해당 영상을 참고하시길 바랍니당~..~

 

 

1. 프론트의 대표적인 형태

패턴 1. 상점

• 목록페이지와 상세페이지로 이루어져 있다.
• 블로그, 뉴스, 투두리스트 또한 비슷한 맥락이다.

사진출처: https://www.youtube.com/watch?v=NwLWX2RNVcw&t=319s

 

패턴2. 단일 페이지 앱

• 페이지 이동 없이 한 페이지 내에서 상호작용이 일어난다.
• 채팅, 지도가 대표적인 예시이다.

사진출처: https://www.youtube.com/watch?v=NwLWX2RNVcw&t=319s

 

패턴3. 설문조사

• 여러 페이지를 통해 상태를 수집하고, 결과 페이지를 보여준다.
• 회원가입, MBTI 검사등이 예시이다.

사진출처: https://www.youtube.com/watch?v=NwLWX2RNVcw&t=319s

 

Funnel

이미지 출처: https://www.semrush.com/blog/marketing-funnel/

(보통 Funnel  퍼널은 마케팅 용어이다)

 

 

유저가 서비스에 들어와서 최종 목표지점까지 도달하기까지 '깔대기(Funnel)' 모양을 가지기 때문에 Funnel 이라고 부른다. 

 

 

 

 

코드 개발

1. 요구사항

우리 이러한 페이지들을 만들고 가입 api 를 호출한다고 가정해보자. 

 

 

보통은 이런식으로 router.push 로 다음 페이지를 이동시키고, 

페이지가 분리되어있으니 전역상태에서 관리를 시켜준다. 

이 방법이 틀리진 않았으나 유지보수 관점으로는 조금 아쉬운 점들이 보인다. 

 

1. 페이지 흐름 흩어져있음

세 개의 router.push 가 있어서 하나하나 따라가야 한다는 어려운 점이 있다.

 

2. 한가지 목적을 위한 상태가 흩어져있음

 

고객 API 를 위한 호출로 전역상태를 관리하는데 전역상태가 서로 다른 페이지에서 수집되고 있다. 

상태를 사용하는 곳과 호출하는 곳이 다름

 

 

 

개선작업

 

1. 전역상태가 아니라 지역상태로 만들어준다. 

2. step 이라는 상태를 만들어서 현재 어떤 UI 를 보여줘야 하는지를 보여준다. 

 

 

3. 보여주어야 하는 페이지를 각각 컴포넌트로 만들어서 가입 퍼널에 모두 넣어준다.

 

 

4. step 상태에 따라 각 UI 컴포넌트를 조건부 렌더링해준다. 

다음 버튼을 누를 때 UI 를 업데이트 해준다. 

 

 

-> step 의 이동은 상위에서 관리하여 UI 의 흐름을 한군데에서 관리할 수 있고, UI 세부사항은 하위 컴포넌트에서 관리할 수 있다. 

 

API 호출에 필요한 상태도 상위에서 한번에 관리하면서 어떤 UI 에서 어떤 상태가 수집되는지 알 수 있다. 

 

개선작업2. 컴포넌트화 

 

if 문으로 엮고 가입 퍼널에서 관리하고 있던 step 부분도 반복이 되기 때문에 내부 로직으로 넣어주었다. 

이렇게 하려면.. 현재 퍼널이 어떤 것인지를 알아야 한다.

현재는 어떤 페이지 인지를 모르기 때문에 (어떤 페이지-> 다른 페이지) 이렇게 순서가 정해져야 하는데 지금 그렇지 않다. 

 

 

상태를 담은 함수를 만들기 위하여 useFunnel 이라는 커스텀 훅을 만들어준다. 

훅 내부로 step 상태를 옮기고 step 컴포넌트로 받은 name 프로머티와 현재 step 이 동일하면 step 컴포넌트로 렌더링하도록 짜준다. 

 

아까 그 코드를 Funnel 에 적용해보면~

이렇게 된다. 

 

히스토리 관리기능

 

router 의 shallow push API를 사용하여 쿼리파라미터를 업데이트 하여 관리할 수 있다. 

 

 

뒤의 내용이 궁금하신 분은 영상을 참고하시면 좋을듯합니다. 

현재 영상에서는 React 로 코드를 구현하였지만  

다음 포스팅은 현재의 코드를 활용하여 React Native 에 내가 어떻게 적용했는지를 작성해보려 한다.