[5/23] 코드리뷰

kind J·2022년 5월 22일

새로운 프로젝트를 시작하면서 지난주 강의 때, 코드리뷰를 다시 리뷰해보는 시간을 가졌다.

1. return 안에서 3항 연산자 지양하자.

가독성 때문에!

    return (
      <>
        <div
          id="screen"
          className={this.state.state}
          onClick={this.onClickScreen}
        >
          {this.state.message}
        </div>
        {this.state.result.length === 0 ? null : 
        	<div>평균 시간: {this.state.result.reduce((a, c) 
            => a + c) / this.state.result.length}ms</div>}
      </>
    );

이런 코드를 작성해야 할때, return 안에서 쓰지말고
밖으로 빼버리자.

renderAverage = () => {
    const { result } = this.state;
      return result.length === 0? null 
      : <div>평균 시간: {this.state.result.reduce((a, c) 
          => a + c) / this.state.result.length}ms</div>
  	};
return (
      <>
        <div
          id="screen"
          className={this.state.state}
          onClick={this.onClickScreen}
        >
          {this.state.message}
        </div>
        {this.renderAverage()}
      </>
    );

또다른 예,

위와같은 경우

이렇게 변수로 꺼내서 쓰기.

list는 컴포넌트로 만들어서 분리하고

그럼 최종적으로

이렇게 깔끔하게 쓸수 있다.

2. return 안에서 map 사용도 지양하자

가독성 때문에!

const prevMovieList = React.useMemo(
  (): React.ReactElement[] => 
	prevMovies.map(movie:IMovie, index: number) => 
		<Movie key={`${movie.imdbId}-${index}`} movie={movie}/>
), [prevMovies])

return(
	...
  {prevMovieList}
)

3. FC (FunctionComponent)

React + Typescript 조합으로 개발을 하면서 자주 사용하는 타입
리액트에서 함수형 컴포넌트의 타입을 선언할 때 사용할 수 있게 React 에서 제공중인 타입

FC 타입은 다음과 같은 형태로 사용한다.

interface AppProps {
  name: string;
}

const App: React.FC<AppProps> = (props) => {
  return <div>hello {props.name}</div>
}

FC 타입의 단점으로
1. 암묵적으로 children props 가 포함된다.
2. 제네릭 문법을 지원하지 않는다.
3. 불필요한 속성들을 포함한다.

이 있어서 지양하는 것이 좋다.
굳이 함수형 컴포넌트에 FC 타입을 선언하지 않고도 컴포넌트에 선언이 가능하다. props 에 직접 타입을 정의해주는 것이다. 간단하면서 props 의 구성을 가장 명확하게 선언할 수 있다.

interface AppProps {
  name: string;
}

const App = (props: AppProps) => {};

4. SEO 설정할 때 react-helmet 쓰자

react-helmet
웹 문서의 헤더 값을 변경할 때 사용하는 리액트 컴포넌트

참고 url)
https://github.com/nfl/react-helmet

필요한 경우

문서 타이틀을 변경할 때 : 싱글 페이지 어플리케이션은 화면을 이동할 때마다 페이지를 요청하는 것이 아니다. 그렇기 때문에 문서의 타이틀은 서버에서 받은 값을 사용한다. 브라우저 단에서 라우팅이 변경되어도 이 값이 변함없이 유지된다. 화면 이동에 따른 타이틀을 변경하려면 헤더를 동적으로 변경해야 하는데 이때 document.title 을 사용해서 헤더를 변경한다.

사용법

$yarn add react-helmet

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

<Parent>
    <Helmet>
        <title>My Title</title>
        <meta name="description" content="Helmet application" />
    </Helmet>

    <Child>
        <Helmet>
            <title>Nested Title</title>
            <meta name="description" content="Nested component" />
        </Helmet>
    </Child>
</Parent>