Maker’s week : 리팩토링 개선 중

app : 네비게이션 분리작업 (with react navigation)

• MainStackNavigation.tsx : 분기의 시작, Screen별로 하나의 스크린을 뿌려준다.( 기존 result page가 sign-up,home,sub,card-edit에 사용되고 있었음)

• screen.ts : 나눈 분기에 대한 path name을 지정해주는데 path는 폴더구조에 따라 변경하는 것이 편하다. (추후 next.js page path로 사용)

---

screen.tsx로 하나의 스크린 만들어주기

• name
  • 화면의 이름을 설정 (ScreenName.ProfileMbtiScreen은 profile/mbti로 변수 설정을 해놨음)
  • 다른 화면으로 이동하거나 어떤 화면인지 조회할 때 사용한다.
• component : 화면을 구성하는 컴포넌트와 동일하다.

 <Stack.Screen
     name={ScreenName.ProfileMbtiScreen}
     component={ProfileMbtiScreen} 
  />

---

web Navigation: screenName.ts

• web 스크린 이동 시 지정한 pathName에 맞춰 옮겨주어야 하기 때문에 여기에도 경로를 추가 해준다.

---

page 설정

• screen.ts에 설정된 path에 맞춰 next.js에 동일한 페이지를 구성한다.
• app path 와 동일하게 src/constants/webViewUrls.ts 를 설정하고 그 path에 맞게 web Page를 가르키고 컴포넌트를 렌더링한다.

// screen.ts
  MyPageMbtiScreen: 'my-page/mbti',

라면
page 구성 또한

my page > mbti.page.tsx

로 설정 해주어야한다.

---

컴포넌트 작업

• 컴포넌트 안에 컴포넌트만 남아있도록 작업

💡 하나의 컴포넌트는 하나의 기능만을 가지고 다른 기능이 개입되었을 시 설계는 잘못된 것이다.

• 로직적으로 동일된 부분이 있다면 react Hooks를 사용하여 재사용한다.

//reactHooks
Const useNavigation =()=>{
const navigation = ()=>{
} 
return navigation

useHooks를 사용할 경우 useCallBack이 필요하다면 그대로 가져와서 사용할 수 있다.