React Best Practice

Intro

리액트는 라이브러리기에 워낙 자유도가 높고 개발자마다 다른 코드 스타일을 가지고 있는 것이 사실이다. 가끔 내가 하는 방식이 맞는지, 더 나은 방식은 없는지, 다른 사람들은 어떻게 사용하는지 궁금할 때가 많다. 이러한 고민을 하던 중 괜찮은 포스팅을 보고 이를 정리하려고 한다.

원문 : https://www.codeinwp.com/blog/react-best-practices

1. 컴포넌트를 작게, 기능단위로 유지

리엑트에서는 컴포넌트를 거대하고 만들어서 여러가지 기능을 포함하게 만들수 있지만 작게 만들어서 하나의 기능에 부합되게 만드는 것이 다음과 같은 장점을 가진다.

• 기능단위의 컴포넌트는 다른 컴포넌트와 독립적이며, 이는 유지보수와 테스트를 용이하게 만든다.
• 각각의 작은 컴포넌트는 여러 프로젝트에 걸쳐 재사용될 수 있다.
• 성능 최적화가 쉽다.

2. 재사용성이 중요하기 때문에, 새로운 컴포넌트 생성을 최소화

거대한 컴포넌트를 작은 컴포넌트로 쪼개는 경우는 좋지만 새로운 기능이 필요할 때 이미 비슷한 역할을 하는 컴포넌트를 재사용하는 것을 고려한다. 컴포넌트 재사용이 용이하게 확장성 있게 만드는 것이 중요하다.

3. 반복을 제거 DRY (Don't repeat yourself)

const buttons = ['facebook', 'twitter', 'youtube'];

return (
  <div>
    {
      buttons.map( (button) => {
        return (
          <IconButton
            onClick={doStuff( button )}
            iconClass={button}
          />
        );
      } )
    }
  </div>
);

4. JS에 CSS를 삽입

styled-components, emotion등을 활용

5. 상태관련 로직과 랜더링 로직을 분리

상태관련 로직은 컨테이너에 뷰 관련 로직은 템플릿에 작성함으로써 로직에 수정이 필요할 때 사이드 이펙트를 줄이고 테스트를 용이하게 만든다.

6. 테스트 가능한 코드 작성 + 테스트 코드 작성

7. 관련 파일들을 폴더로 그룹핑

8. snippet 사용

9. 린트 도구 사용

정리

리액트에서 "안티 패턴은 존재하지만 Best Practice는 존재하지 않는다" 라는 말도 있다. 프로젝트의 규모, 인원, 요구사항 들은 다 다르기 때문에 하나의 정답이 존재할 수 없기 때문이다. 그렇다고 해서 주먹구구식으로 개발했다가 요구사항이 변경되었을 때 피보는 경우도 많다. 정답은 없지만 좋은 코드를 많이 보고 자신의 것으로 만드려고 하는 노력이 중요한 것 같다.