React :: 리액트 리팩토링 7가지 팁

Refactoring React Code: Overview를 보고 배운점

 

 

최근에 작업한 프로젝트 Affitalink(Github)를 리팩토링 하기로 마음먹고,

다른 사람들은 어떻게 리팩토링 하는지 찾아보다가 좋은 글을 발견했다.

 

 

정리(TLDR;)

1. 코드 포맷팅을 하자
2. 쓸모없는 <div> <span> 제거
3. 이름 생각하기
4. 반복 그만(DRY: Don't Repeat Yourself)
5. 함수형 컴포넌트 O / 클래스 컴포넌트 X
6. 화살표 함수는 렌더 밖으로
7. 번들을 작게 만들자

이상적인 리팩토링은 리팩토링이 일어나지 않는 것이라고 한다.
좋은 코드를 작성해서 버그와 이슈 가능성을 줄이자.
정기적인 코드 리뷰가 도움이 될 듯 싶다!

 

 

Technical Debt가 뭐지?

'기술적인 부채'라고 번역되고 있다.

대략 의미는 타협을 본 퀄리티 이슈가 나중에 추가적인 작업이 이루어지는 것을 말한다.

긴 시간의 개발과 테스트 과정에서 더 발생할 가능성이 높다고 한다.

 

발생하는 이유는 

• 새 기능을 빠르게 내야할 때
• 테스트가 충분하지 않을 때
• 요구사항이 빠르게 바뀔 때
• 개발자가 관련 경험이 없을 때
• ... 등

 

Technical Debt는 코드에 적어놓아야 한다. 안그러면 나중에 까먹어 버리니까

 

 

리팩토링의 필요성

위의 Techical Debt를 줄이기 위해 존재하는 코드의 퀄리티를 증가시키는 리팩토링을 한다.

리팩토링은 지금의 동작에 영향을 주지 않으면서 코드를 바꾸는 과정이다.

 

대부분의 경우 리팩토링은 중요하지만 필요하지 않은 경우도 있다고 한다,

프로토 타입이거나, 컨셉을 보여주는 등

 

그리고 리팩토링에 너무 많은 시간을 잡아먹는 것도 조심해야겠다

 

 

그럼 리액트 리팩토링 7가지 팁을 알아보자

1. 코드 포맷팅을 하자

개발자들의 선호도에 따라 누구는 따옴표, 누구는 쌍따옴표 이렇게 쓰이는데 같은 코드/팀에서 통일하자는 말이다.

Prettier로 간단히 해결!

Prettier에 Pre-commit Hook 이라는 것도 있는 듯

커밋하기 전에 포맷팅을 해주는 훅으로 보인다. OK ✔️

 

2. 쓸모없는 <div> <span> 제거

리액트 버전 16.2(2017/11)부터 <div>나 <span>으로 감싸서 리턴했어야 하지만,

지금은 아니니 fragments(<> ... </>)를 사용하자.

 

3. 이름 생각하기

모든 이름은 자체적으로 설명되어야 한다!

본인뿐만 아니라 팀에게도 로직의 이해를 돕는다.

 

4. 반복 그만(DRY: Don't Repeat Yourself)

반복되는 코드 블록은 재사용가능한 컴포넌트에 넣자.

DRY가 잘되면 한 곳만 변경하면 되니까 시간절약에 도움된다.

 

DRY 작게 유지하는 간단한 규칙
1. 한 코드 블록을 두 번이상 사용하면 빼내자
2. 예를들어 컴포넌트를 100줄로 제한한다고 정했다면, 100줄이 넘어가면 빼낼 로직이 있는지 확인하자.
로직을 작은 기능들로 나누자 

 

5. 함수형 컴포넌트 O / 클래스 컴포넌트 X

리액트 버전 16.8에 나온 훅으로 클래스 기능들에 접근할 수 있게 되었다.

클래스의 라이프사이클 메서드를 기반으로 그룹짓지 않고,

훅은 컴포넌트 로직을 관련된 부분에 따라 작은 함수로 그룹화 할 수 있도록 해주었다고 한다.

무엇보다 코드를 줄이고, 깨끗하게 만들어 준다.

 

6. 화살표 함수는 렌더 밖으로

이런 코드 자주 봤을 것이다.

 render() {
   return (
     <div>
       ...
       <button onClick={() => this.setState({ flag: true })} />
       ...
     </div>
   );
 }

하지만 추천하지 않는다고 한다.

이유는 렌더링 될 때마다 새로운 함수의 인스턴스가 생기기 때문.

한 두 번 렌더링 되면 문제가 아니지만, 다른 경우 성능에 영향을 미칠 수 있다고 한다.

 

밖으로 빼낼 수 있으면 빼내자(이 친구 예시로 클래스 컴포넌트를 썼네ㅎㅎ)

changeFlag = () => this.setState({ flag: true })
  render() {
   return (
     <div>
       ...
       <button onClick={this.changeFlag} />
       ...
     </div>
   );
 }

 

7. 번들을 작게 만들자

외부 라이브러리를 가져올 때 필요한 것만 부르자

모든 라이브러리를 로드하지않기 때문에 번들 사이즈를 줄일 수 있다.

 

즉 이것보다

import lodash form 'lodash'
 ...
 const certainProps = lodash.pick(userObject, ['name', 'email']);
 ...

 

이렇게 부르자는 의미

import pick from 'lodash/pick'
...
const certainProps = pick(userObject, ['name', 'email']);
...

 

 

원본 링크

Refactoring React Code: Overview

=> https://keenethics.com/blog/1554572000000-refactoring

 

 

react by Lautaro Andreani @unsplash