[Codestates] Pre-Project 7일차 회고

Pre-Project 7일차

• url path 별 중첩 라우팅 구현
• Userpage UI 구현
  

---

주말 예정

• edit 컴포넌트 구현
  ㄴ 프로필 이미지, 닉네임 수정
  ㄴ 계정 삭제 기능 추가

---

회고

• 중첩 라우팅(Sub routing)이라는 것을 알게되어 시도해봤다.
• 코드가 가독성이 높아졌다.

// ../UserPage.js
const UserPage = () => {
    const [isEdit, setIsEdit] = useState(false);
    const isEditChangeHandler = () => {
        setIsEdit(!isEdit)
    }

    return (
        <Container>
            <UserTopInfo onClick={isEditChangeHandler} />
            {isEdit ? <UserInfoEdit onClick={isEditChangeHandler}/> : <UserQAList />}
        </Container>
    )
}

• 기존에는 상단의 Edit profile 을 버튼으로 구현하여 props를 통해 상태를 변경했다.
• /member path에 추가적인 경로를 명시하고, Userpage 에 중첩 라우팅을 구현한다.

// ../App.js
function App() {
...
        <Routes>
          <Route path='/member/*' element={<UserPage />}/> // 추가적인 path가 있을 것이라 /* 로 명시
            ...
        </Routes>
...

// ../UserPage.js
        <Container>
            <UserTopInfo />
            <Routes>
                <Route path='*' component={<UserQAList />} />
                <Route path='/edit' component={<UserInfoEdit />} />
            </Routes>
        </Container>

• 기존엔 props로 setState 함수를 전달하고 삼항연산자로 렌더링한 반면, 중첩 라우팅으로 서브페이지를 구성했을 때 코드를 이해하기 더 쉽다.