[refactoring] 불필요한 context 사용 제거

다음은 원티드 프리온보딩 프론트엔드 챌린지 CRUD w ReactQuery 과제 중 진행된 리팩토링 사항이다.

# 관심사의 분리 # 적절한 추상화

 

첼린지 소개 페이지

프리온보딩 프론트엔드 챌린지 1차 | 원티드

구현한 코드 깃허브

GitHub - ggsno/wanted-pre-onboarding-challenge-fe-1: Learning CRUD with React Query

🏁 목적 | 중복 코드 제거

◼ 로그인과 회원가입에서 필요한 값들이 비슷해서 useContext를 이용해 중복되는 코드를 줄이고자 함

📌 기존 코드 |불필요한 context 사용

◼ auth 폴더 안에 index파일과 components 폴더를 만들어 index파일 안에서 로직들을 짜고 context로 넘겨주는 방식으로 구현

◼ component 폴더 안에는 view에 관련된 코드만 넣어 로직과 뷰를 분리하고자 함

기존 폴더구조

/auth/index.tsx

/auth/components/Login.tsx

 

✅ 변경 코드 | context 제거 및 폴더구조 변경

◼ auth에는 굳이 context로 관리할 전역 상태가 없을 것 같아 context를 제거

◼ 최상단에 있던 auth 폴더를 components 안에 넣고 각각의 컴포넌트에 독립적으로 사용되는 로직을 컴포넌트에 내장

변경된 폴더구조

/components/auth/Login.tsx

💡 더 알아보고 싶은 것 | 에러 핸들링, 코드 일관성, 로직과 뷰 분리

◼ 에러 캐치를 어디서 해야하는지 잘 모르겠다.

  - api call을 실패 했을 때

    1. api 호출 코드에서 바로 에러를 캐치

    2. 에러를 throw만 하고 view에 보여지는 곳에서 캐치를 해 사용자에게 피드백주기

    3. 최상단(페이지? 라우터?)에서 캐치

◼ 일관된 코드를 위해 로그아웃을 컴포넌트로 만들었다. 로그아웃이 필요하면 Link 컴포넌트로 로그아웃 페이지의 로그아웃 컴포넌트를 연결시켰는데 맞는 접근인지 모르겠다.

/src/components/auth/Logout.tsx

로그아웃 이용 코드

◼ 현재 로그인은 하나의 로그인 컴포넌트 안에 유효성 검사(비즈니스 로직)와 UI 구성(뷰)을 함께 넣은 상태다. 그런데 관심사의 분리에서 비즈니스 로직과 뷰를 분리해야 하는데 여기서도 굳이 분리가 필요한지 의문이다. 재사용 가능성이 거의 없는 하나의 컴포넌트 안에서도 로직이 분리 되어야 할까?

기존의 로직과 뷰를 분리한 코드

재사용 가능성이 거의 없는 로그인 컴포넌트에 로직과 뷰를 함께 넣은 코드

💌 피드백

◼ 에러 처리에는 여러 가지 방법이 있음. 서비스 로직 호출하는 쪽에서 하는 방법, 혹은 ErrorBoundary 컴포넌트로 받는 방법 등. api call 같은 경우는 전자가 적절함. react-query를 쓸 때는 전역 error handler도 고려해볼 것.

 

◼ 컴포넌트가 분리될 때 꼭 재사용 가능성에 따라 분리되는 건 아님. 복잡도를 낮출 목적으로 분리해주는 것도 좋은 방법. 복잡도가 높은 컴포넌트라면 컴포넌트 안의 관심사도 다양할 가능성이 매우 높음.