230524(수)

🎄 성장일지 4.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 (1.0)키워드
최대한 간단하게 정리, 추후에 보면서 스스로 설명
🍉 (2.0)경험 위주로
단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성
❄️ (3.0)정해진 템플릿에 맞춰서
키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성
(3.1)230102부터 시작되는 학습에 관한 내용 추가
(3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기!
🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!

🔑 오늘의 학습 키워드

리액트 컴포넌트 구조

타입스크립트와 함께 리액트 컴포넌트의 구조(?) 혹은 컨벤션(?)을 작성하는 방법은 여러가지가 있는 것 같다. ex) React.FC을 이용한 방법, props 객체의 타입을 지정해주는 방법 등등 그 중에서 나는 굳이 구조분해할당을 사용하지 않고 props로 받으면서 props의 객체 타입을 지정해주는 방법이 제일 깔끔하고 보기 좋은 것 같다. 예를 들면 아래와 같다.

interface TempProps {
  name: string;
  age: number;
  address: string;
}

const Temp = (props: TempProps) => {
  const { name, age, address } = props;
  return (
    <>
      <p>{name}</p>
      <p>{age}</p>
      <p>{address}</p>
    </>
  );
};

이렇게 표현하면 컴포넌트를 딱 봤을 때, 좀더 직관적으로 어떤 props를 받아서 어떤 역할을 하는지 알 수 있기 때문에 좋은 것 같다. 그리고 위와 같은 방법을 사용하면 props에서 내가 필요한 값들만 가져와서 return 하는 jsx 부분에 바로 사용할 수 있기 때문에 편리하다.

리액트 라우터

리액트 라우터도 결국엔 Context API로 구성되어있다. 즉, Provider와 Consumer로 구성되어있다. 그래서 우리가 라우터를 사용할 때, 라우터를 감싸는 부분에 Provider를 사용하고, 라우터를 사용하는 컴포넌트에서는 Consumer를 사용해서 라우터를 사용할 수 있다. (Context로 감싸고 있는 부분을 Provider라고 하고, Context를 사용하는 부분을 Consumer라고 한다.)

오늘 구현한 라우터 구조를 살펴보면 쉽게 이해할 수 있다.

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootPage />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: '/',
        element: <MainPage />,
        errorElement: <ErrorPage />,
      },
      {
        path: '/issues/:issueId',
        element: <IssueDetailPage />,
        errorElement: <ErrorPage />,
      },
    ],
  },
]);

function App() {
  return (
      <div className="App">
        <RouterProvider router={router} />
      </div>
  );
}

export default App;

먼저 App 컴포넌트에 들어갈 Root 컴포넌트를 만들어주고, 그 안에 라우터를 사용할 컴포넌트들을 만들어준다. 그리고 라우터를 사용할 컴포넌트들을 라우터에 등록해준다. 그리고 App 컴포넌트에서는 라우터를 감싸주는 Provider를 사용해서 라우터를 사용할 수 있게 해준다. 그리고 라우터를 사용할 컴포넌트에서는 Consumer를 사용해서 라우터를 사용할 수 있게 해준다. Counsumer가 사용할 수 있는 기능은 다양하다. 예를 들면, useNavigate, useLocation, useMatch 등등이 있다. 이런 기능들을 사용해서 라우터를 사용할 수 있다.

📝 요약 및 하루 간단 회고

오늘 정말 집중해서 개발했다. 내가 맡은 상세 페이지를 목표로 하고 더 나아가 라우터까지 구현 완료하여 정말 뿌듯하다. 그리고 무엇보다 어떤 블로그를 참고하는 방식이 아닌 공식문서를 보면서 구현했기 때문에 더 기분이 좋았다. 무엇보다 공식문서를 보면서 개발하는 것에 재미가 붙은 것 같아서 더더더 좋다!! 앞으로도 공식문서를 토대로 학습하고 개발할 수 있는 개발자가 되자.

오늘의 잘한 점

• 오늘 열심히 목표한만큼 구현해낸 점

오늘의 아쉬운 점

• 집 와서 너무 구현에만 몰입했나..? 개인 공부도 조금씩 하면서 프로젝트 진행하자!

참고

• 리액트 라우터 공식문서