초보자용 React 코드 청소기

React 코드를 깨끗하게 정리

이 글의 코드는 예쁘게 써야 하며, 더 적게 쓴다고 정의해야 한다.
도대체 주관적인 것이니 참고해 주십시오!

필요 없는 답변

흔한 예...

import React from 'react';

const Hello = () => {
    return <h1>Hello</h1>
};

이걸 깨끗하게 쓰면...

import React from 'react';

const Hello = () => <h1>Hello</h1>;

state 등 논리적인 구성 요소가 필요하지 않아서return을 생략할 수 있기 때문에 이렇게 쓰는 것이 유행입니다.

분할 대입 사용

흔한 예...

import React from 'react';

const Hello = props => (
    <div>
      <h1>{props.hoge}</h1>
      <p>{props.foo}</p>
    </div>
  );

import React from 'react';

const Hello = ({ items }) => (
  <div>
    {items.map(item => (
      <div key={item.id}>
        <h4>{item.name}</h4>
        <small>{item.timestamp}</small>
      </div>
    ))}
  </div>
);

이걸 깨끗하게 쓰면...

import React from 'react';

const Hello = ({ hoge, foo }) => (
    <div>
      <h1>{hoge}</h1>
      <p>{foo}</p>
    </div>
  );

import React from 'react';

const Hello = ({ items }) => (
  <div>
    {items.map(({ id, name, timestamp }) => (
      <div key={id}>
        <h4>{name}</h4>
        <small>{timestamp}</small>
      </div>
    ))}
  </div>
);

의 첫 번째 예는props에 대한 분할 대입이고 두 번째 예는map이다.
가독성이 증가한 것 같아요.

쓸데없는 div 제거

흔한 예...

import React from 'react';

const Hello = ({ hoge, foo }) => (
    <div>
      <h1>{hoge}</h1>
      <p>{foo}</p>
    </div>
  );

이걸 예쁘게 쓰면

import React from 'react';

const Hello = ({ hoge, foo }) => (
    <>
      <h1>{hoge}</h1>
      <p>{foo}</p>
    </>
  );

이것은 용례에 달려 있지만 div로 묶을 필요가 없는 상황에서 가능한 한 쓸모없는div를 제거하기를 바랍니다.
<>... ...

단락 평가

흔한 예...

import React from 'react';

const Hello = ({ user }) => <h1>{user && user.name}</h1>;

이걸 깨끗하게 쓰면...
이 수법은 자주 사용하니 공책에 기록하는 것이 가장 좋다.
그리고 아래의 예도 소개해 드리겠습니다.

import React from 'react';

const Hello = ({ user }) => <h1>{user?.name}</h1>;

보충하면?if else 문과 같은 의미입니다.user.만약 name가 사실이라면 (값이 있다면) 사용자입니다.name이 반환되었습니다.user.만약 name가 가짜라면, "anonymous"는 반환될 것입니다.
이 코드도 아래와 같이 쓸 수 있다.

import React from 'react';

const Hello = ({ user }) => <h1>{user.name ? user.name : 'anonymous'}</h1>;

import React from 'react';

const Hello = ({ user }) => <h1>{user.name || 'anonymous'}</h1>;

는 좀 어렵지만 첫 번째 ||||를 사용하는 예는user입니다.만약 name가 가짜라면, 'anonymous' 는 반환될 것이다.사용자입니다.name ? user.'anonymous'와 같다.
두 번째 시도??의 예는 사용자입니다.name이null이면'anonymous'가 반환됩니다.
자바스크립트에서 빈 문자와 숫자의 0은 가짜로 평가되지만, 때로는 빈 문자와 숫자의 0을 직접 되돌려 주고 싶을 때 사용된다.
이 두 가지는 모두 용례에 근거한 것이니 지금은 기억할 필요가 없다.

이 받침대를 붙이는 게 좋을까요?

다음 매개 변수가 하나일 때 브래킷을 생략할 수 있습니다.

import React from 'react';

const Hello = ({ user }) => <h1>{user.name ?? 'anonymous'}</h1>;

이 점에 대해 ESlint는 브래킷이 가장 좋다고 기록했지만 찬성과 반대도 있었다.
Type Script만 쓰면 스타일을 쓸 때 필요합니다.
나는 이것이 개인의 취향이라고 생각한다.
필자는 js에 쓸 때 쓰지 않았다...

최후

VS코드에 React를 쓴 사람이 절대 넣을 플러그인을 소개합니다.

이 플러그인을 설치하면 편리한 트랜스포머를 사용할 수 있다.
예.rafce를 입력하면
Hello.js

import React from 'react';

const Hello = props => {
  const handleClick = e => {
    e.preventDefault();
    console.log('Hello');
  };
  return (
    <form>
      <button type="submit" onClick={handleClick}>
        {props.button}
      </button>
    </form>
  );
};

단번에 이 코드를 완성할 수 있으니 번거로움을 줄여라!
꼭 넣어야 돼!