시연

https://react-messenger-17th-psi.vercel.app/

중점적으로 고려한 요소

• 코드 중복 줄이기 → 공통되는 UI 컴포넌트들 재사용

  • Layout

    • 친구 페이지 / 채팅 페이지 / 더보기 페이지 유사한 디자인

    

    • App.tsx

    <Route element={**<Layout/>**}>
       <Route path="/FriendPage" element={<FriendPage/>}/>
       <Route path="/ChatroomPage" element={<ChatroomPage/>}/>
       <Route path="/SettingPage" element={<SettingPage/>}/>
    </Route>
    

    • Layout.tsx

    <PageWrapper>
         <SideBar>
            <Link to="/FriendPage">
                 <IconImg src={`${process.env.PUBLIC_URL}/image/user.png`}/>
            </Link>
            <Link to="/ChatRoomPage">
                 <IconImg src={`${process.env.PUBLIC_URL}/image/speech-bubble.png`}/>
            </Link>
            <Link to="/SettingPage">
                <IconImg src={`${process.env.PUBLIC_URL}/image/settings.png`}/>
            </Link>
         </SideBar>
         <Main>
           **<Outlet/>**
        </Main>
    </PageWrapper>
    

배운 점들

• React.memo 활용으로 불필요한 렌더링 줄이기

  

  • React.memo란?
    • UI 렌더링 속도를 증가시키기 위해 고차 컴포넌트(HOC) React.memo()를 제공
    • 컴포넌트 렌더링 후 결과 메모이징(Memoizing)
      • Memoization이란?
        • 기존에 수행한 연산의 결과 값을 저장하고 동일한 입력이 들어올 경우 재활용하는 프로그래밍 기법
    • 다음 렌더링이 발생했을 때 props가 동일하다면 불필요한 리렌더링을 하지 않고 리액트는 메모이징한 내용을 재사용함
    • 같은 props 로 렌더링이 자주 일어나는 컴포넌트가 있을 경우 활용!

• 네이밍의 중요성

  • 기능이 비슷한 컴포넌트들과 인터페이스의 향연😨

  • 헷갈림을 방지하고 깔끔한 코드 작성을 위해 네이밍 규칙을 세우는 게 중요!

    export interface Chat {
     ...
     }
    
    > export interface ChatInterface
    > export interface IChat 
    

아쉬운 부분들

• 로컬 스토리지 적용
  • 현재는 채팅창에서 새로 고침 할 경우 기존의 대화가 보이지 않음..
• Profile 공통 컴포넌트 활용하는 방법

key question

1. Routing

• 사용자가 요청한 URL에 따라 적절한 페이지를 보여주는 것
• 페이지별로 컴포넌트를 분리하며 프로젝트를 관리하기 위해 필요한 것이 라우팅 시스템
• 리액트에서는 다양한 라우팅 라이브러리가 존재하지만, 이 중 가장 자주 쓰이는 것은 리액트 라우터
  • React-router-dom에는 Link, Route, Router등의 컴포넌트 존재

1. SPA

• Single Page Application의 약자로, 한 개의 페이지로 이루어진 어플리케이션을 의미함.
• 과거 페이지 웹 뷰를 로딩할 때 서버에서 리소스를 보내주는 서버 전송 방식이였던 것과 달리 SPA는 페이지에서 필요한 부분만 로딩하는 방식
  • 필요한 데이터만을 받아와서 업데이트가 발생한 부분에만 적용을 해줌