[가은] 1113(월) 개발기록

폴더명

• 폴더 내에 index.tsx가 들어가면 폴더명 대문자로 시작, 그 외에는 폴더명 소문자로 시작하는 것으로 결정했다.

폴더 구성

• 컴포넌트와 페이지는 index.tsx, styled.ts 파일로 구성한다.

화살표 함수와 일반 함수

• 일반적으로는 화살표 함수를 사용하되, 컴포넌트를 정의할 때는 일반 함수를 사용하기로 했다.
• 한 파일에서 하나의 컴포넌트만 export하는 경우에는 export default function을 사용하는 것이 더 명확하다고 판단했다.

HashRouter

우리 프로젝트는 HashRouter를 쓰기로 결정했다.

SEO 최적화가 필요하지 않기 때문에, HashRouter를 쓰는 것이 더 괜찮다고 생각했다.

• BrowserRouter

  • HTML5의 history API를 활용한 라우터
  • SSR에 적합
  • 새로고침 or url 직접 접근 시 에러 발생할 수 있음
  • 배포 상대적으로 어려움

• HashRouter

  • URL의 hash를 활용한 라우터
  • CSR에 적합
  • 새로고침 or url 직접 접근 시 에러 발생하지 않음
  • 배포 상대적으로 간단함

React.FC

컴포넌트를 만드는 도중 React.FC 타입을 사용하자는 의견이 나왔다.

이전에 분명 들어본 것 같았는데, 내가 왜 사용하지 않고 있었는지 정확히 기억이 나지 않았다.

찾아보니 아래와 같은 이유로 React.FC 타입을 권장하지 않고 있었다.

• children prop이 옵셔널로 포함되어 props 타입이 명확하지 않음

  • 팀원은 children을 props에 작성하지 않아도 된다는 점에서 React.FC를 쓰자고 말했었다.
  • 하지만 이런 경우 children의 필요 여부를 코드로 알 수 없기 때문에 오히려 마이너스 요소가 될 수 있다.
  • 코드의 의도를 명확하게 드러낼 수 없는 안티패턴이라고 한다.

• 제네릭을 지원하지 않음

그래서 우리는 React.FC를 사용하지 않고, props 옆에 타입을 정의하는 방법을 사용하기로 했다.

React.ReactNode

이전에 인턴을 할 때, children같은 요소의 타입을 지정할 때 여러 타입 중 무조건 ReactNode를 사용하라는 말을 들은 적이 있었다.

여기에 관해서도 기억이 잘 나지 않아 다시 찾아보았다.

비슷한 것으로는 ReactNode, ReactElement, ReactChild, JSX.Element가 있다.

• ReactNode

  • 가장 넓은 의미의 타입
  • React 컴포넌트에서 렌더링될 수 있는 모든 타입을 포함한다.

• ReactElement

  • createElement 함수의 반환값이거나 JSX를 통해 생성되는 객체이다.

• ReactChild

  • ReactNode의 부분집합
  • 렌더링될 수 있는 단일 노드

• JSX.Element

  • JSX를 반환하는 컴포넌트의 반환 타입
  • ReactElement와 비슷하지만, Typescipt 환경에서 JSX 문법으로 작성된 React 요소를 나타내는 데 사용된다.

이전에 무조건 ReactNode를 사용하라고 하셨던 이유가, 이 타입이 가장 포괄적이고 안전하기 때문인 것 같다.

하지만 children을 설정할 때 조금 더 좁은 범위로 제한하고 싶다면 굳이 ReactNode로만 할 필요는 없을 것 같다.

기본적으로는 ReactNode를 사용하되 필요에 따라 다른 타입들도 써보자.