[230529] 사이드 프로젝트 - 코드리뷰

Today

• 오늘은 현업 프론트엔드 개발자분께 코드리뷰를 받았다.
• 받았던 팁들을 정리하려고 한다.
• 공부를 많이 해야겠다고 느꼈던 날

Today I Learned

1. props 변수로 할당

• 자주 쓰는 변수들은 props.title 이렇게 계속 쓰는 것보다 할당을 해준 뒤 사용하는 것이 가독성을 높힐 수 있다.

interface PostProp {
  title: string;
  content?: string;
  componetType: "slider" | "horizontalScroll";
  component: Array<string>;
  children?: React.ReactNode;
}

function Post(props: PostProp) {
  const { title, content, component = [], componetType } = props;

2. 함수로 쪼개기

• post 를 그려주는데 상황별로 다르게 post 를 그린다.
• 그럴때 함수로 분리하거나 switch 문을 쓰는 것도 하나의 방법

함수로 분리

function PostByComponentType(type: "slider" | "horizontalScroll") {

  const Component = type === 'slider' ? <SliderPost/> : <HorizonScrollPost/>

  return Component

}

function SliderPost(props:PostProp ) {
  //처음에 '' 이렇게 초기화 해주면 빈 값에 대한 예외처리 가능
  const { title = '', content = '' } = props;

  return (
    ...
  )
}

function HorizonScrollPost() {
  return (
   ...
  )

switch 문

function Post(props: PostProp) {
  const { title, content, component = [], componetType } = props;

  function Slide(componentType: "horizontalScroll" | "slider") {
    switch (componentType) {
      case "horizontalScroll":
        return <HorizonScrollPost component={component} />;
      case "slider":
        return <SliderPost component={component} />;
    }
  }

  return (
    <Wrapper>
      <Title>{title}</Title>
      <Content>{content}</Content>
      <Slide componetType={componetType} />
      {props.children}
    </Wrapper>
  );
}

function SliderPost(component: Array<string>) {
  return (
   ...
  );
}

function HorizonScrollPost(component: Array<string>) {
  return (
    ...
  );
}

3. 폴더 구조

• 폴더구조는 리액트 프로젝트마다 다양하다고 하심
• 폴더는 잘 분리해놓은 것 같다고 하셨다.
• 현재 사이드 프로젝트 폴더 구조이다.

├── asset
│   └── images
├── components
│   ├── atoms
│   └── temlates
├── hooks
│   ├── usePathParams.ts
│   └── useQueryString.ts
├──libs
│   ├── customAxios
├── pages
│   ├── AdmissionApplicationPage.tsx
│   ├── KindergartenPage.tsx
│   ├── NotFoundPage.tsx
│   ├── NotificationPage.tsx
│   └── index.ts
├── screens
│   ├── AdmissionApplication
│   ├── Kindergarten
│   └── Notification
├── styles
│    ├── GlobalStyle.ts
│    ├── StyleModule.ts
│    ├── ThemeConfig.ts
│    └── styled.d.ts
├── App.tsx
├── index.tsx
└── setupTests.ts

4. 공부해야 할 것 들

• nextjs
• react-hook-Form
• react-query
• tailwind
• axios
• typescript - 이펙티브 타입스크립트
• recoil - 애는 현업에서 잘안쓰는거같구
• redux,mobx,jotai