레벨2 - 다시, 점심 뭐 먹지 리뷰 피드백

 

1. regular function과 arrow function 어느 것을 사용해야 할까?

일반적으로 한쪽이 권장될 만큼의 차이는 크지 않으며 팀 내 컨벤션으로 가져갈 수 있는 부분이라고 생각한다. 아래 두 가지를 학습해 보자.

 

1. react가 아닌 js 관점에서 왜 arrow function을 쓰면 bind를 안 해줘도 되는 건지?
2. 각 선언 방법에 따라 취할 수 있는 장단점은 무엇인지?

 

2. 컴포넌트 props의 인터페이스

한 파일에 모아놓기보다는, 각각 사용하는 컴포넌트와 한 파일에 두는 것을 권장한다. 재사용이 필요한 인터페이스라면 따로 이격 하는 것이 좋지만, 그렇지 않은 경우는 연관된 컴포넌트와 가까이 있는 것이 코드를 확인하는데 더 수월하기 때문이다.

 

3. 컴포넌트 내부 네이밍

class RestaurantInfoModal extends Component<RestaurantModal> {
  render() {
    const { selectedRestaurant: restaurant } = this.props;

 

네이밍 할 때 이것을 받는 컴포넌트의 입장에서 생각해 보자. RestaurantInfoModal의 입장에서는 위에서 주어진 restaurant의 정보를 보여주는 모달이기 때문에 이것이 select 된 정보인지까지는 알 필요가 없다. 

 

4. ... this.state의 차이

this.setState({ filteredRestaurants: filteredRestaurants, sorting: value });

this.setState({ ...this.state , filteredRestaurants: filteredRestaurants, sorting: value });

 

this.setState({ filteredRestaurants: filteredRestaurants, sorting: value })
-> filteredRestaurants와 value를 직접 할당하여 업데이트한다.

 

this.setState({ ...this.state, filteredRestaurants: filteredRestaurants, sorting: value })
-> this.state 객체를 ...을 사용하여 복사한 뒤, filteredRestaurants와 value를 할당하여 업데이트한다.

 

+ 리뷰리뷰

1. import/order (import 정렬 eslint)

"import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          "parent", 
          "sibling",
          "object",
          "type",
          "index"
        ],
        "alphabetize": {
          "order": "asc"
        }
      }
    ]

 

2. noscript의 역할

script가 안 읽혀서 로드가 안될 때 본 태그 내용이 뜬다.

<noscript>
  <h2>이 페이지를 사용할 수 없습니다.</h2>
  <p>스크립트 사용이 비활성화 되어 있습니다.</p>
  <p>스크립트 사용을 활성화 시켜 주세요.</p>
</noscript>

 

3. PropsWithChildren

children을 props로 내려줄 때 타입을 어떻게 지정할 수 있을까?

먼저,  children에 ReactNode를 직접 명시하는 방법이 있다.

interface InputGroupProps {
  children: React.ReactNode;
  labelValue: string | React.ReactElement;
  errorMessage?: string;
}

 

 

그리고 리액트에서 제공해 주는 PropsWithChildren 타입을 사용하는 방법이 있다. 

interface InputGroupProps {
  labelValue: string | React.ReactElement;
  errorMessage?: string;
}

const InputGroup = ({
  children,
  labelValue,
  errorMessage,
}: PropsWithChildren<InputGroupProps>) => {

 

그런데 PropsWithChildren의 children 타입을 살펴보면 옵셔널로 되어 있는 것을 알 수 있다.

 

type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined };

 

즉, children이 존재하지 않더라도 에러가 발생하지 않는다는 것이다.

 

따라서 children을 옵셔널로 사용하는 부분에서는 PropsWithChildren을 사용하고, 항상 children을 사용하는 부분에서는 PropsWithChildren을 사용하지 않는 것을 권장한다.

 

4. ChangeEvent

리액트의 ChangeEvent와 자바스크립트의 ChangeEvent가 혼동될 가능성이 있다. 따라서  React.ChangeEvent와 같이 작성하는 것을 추천한다.

 

5. tsconfig의 baseURL을 활용한 상대 경로 축약

"compilerOptions": {
    ...,
    "baseUrl": ".",
    "paths": {
      "components/*": [
        "src/components/*"
      ],
      "pages/*": [
        "src/pages/*"
      ],
      "styles/*": [
        "src/styles/*"
      ],
      "utils/*": [
        "src/utils/*"
      ],
    },
    ...
  },