[React] Refactoring guide

code refactoring 하는 방법

import 순서

1. 라이브러리
   └── React 관련 패키지
   └── 외부 라이브러리
2. 컴포넌트
   └── 공통 컴포넌트
   └── 현재 컴포넌트 기준 상대적으로 먼 컴포넌트
   └── 현재 컴포넌트 기준 상대적으로 가까운 컴포넌트
3. 함수, 변수 및 설정 파일
4. 사진 등 미디어 파일
5. CSS 파일

함수 영역

1. 하나의 함수는 한 가지 기능만 수행할 것 (작게 쪼개기)
2. 불필요한 state 는 불필요한 렌더링을 유발하므로 제거할 것
   a. 부모로부터 전달받은 props
   b. UI 변화에 관여하지 않는 값, 시간이 지나도 변하지 않는 값
   c. state(or props) 끼리의 계산은 그냥 변수에 넣기
3. 함수 매개변수에서 바로 구조 분해 할당(= 비구조화 할당)

구조 분해 할당: 배열이나 객체의 속성을 해체하여 그 값을 변수에 담을 수 있게 하는 ES6 문법

4. 계산된 속성명을 이용한 input Handler 함수 합치기

* 계산된 속성명: 객체의 속성명이 최초에 결정되는 것이 아니라 동적으로 결정되는 것 (ES6)
* input 태그의 name 속성과 계산된 속성명을 함께 이용하면 여러 개의 input Handler를 하나로 합칠 수 있다.
(name 속성은 오직 input 태그에서만 사용할 수 있음) 

ex)
const Example = () => {
  const [inputValues, setInputValues] = useState({
    id: '',
    pw: '',
  });

  // const handleId = event => {
  //   const { value } = event.target;
  //   setInputValues({ ...inputValues, id: value });
  // };
  // const handlePassword = event => {
  //   const { value } = event.target;
  //   setInputValues({ ...inputValues, pw: value });
  // };
  
  //위에 함수를 합하면
  const handleInput = event => {
    const { name, value } = event.target;
    setInputValues({ ...inputValues, [name]: value });
  };

  return (
    <>
      <input name="id" type="text" onChange={handleInput} />
      <input name="pw" type="password" onChange={handleInput} />
    </>
  );
};

5. 삼항(조건) 연산자, 논리 연산자 활용
   조건문을 Boolean 데이터 타입의 특성을 활용하여 삼항연산자, 논리연산자로 작성

//삼항 연산자
const validLogin = () => {
    input.id.includes('@') && input.pw.length > 6
      ? setIsValid(true)
      : setIsValid(false);
  };
  
//논리 연산자
const validLogin = () => {
    const isValid = input.id.includes('@') && input.pw.length > 6;
    setIsValid(isValid);
  };

JSX 영역

1. 스타일 동적 사용은 CSS가 아닌 className의 변화로

• 인라인 스타일은 가장 높은 우선순위로 스타일 중복 우려, 재사용이 어려움 등의 이유로 사용하지 않는 편이 좋음

<button className={isActive ? 'activeBtn' : 'deactiveBtn'}>
  Login
</button>

2. 렌더링 최적화를 위해 a 태그가 아닌 Link 태그 사용하기
3. 반복되는 UI는 Array.map()을 활용할 것

  <div>
      {ARTICLE_LIST.map(data => {
        return (
          <li key={data.id}>
            <Link to={data.url}>{data.content}</Link>
          </li>
        );
      })}
    </div>
    
    *상수는 컴포넌트의 바디 안에서 선언할 경우 컴포넌트가 리렌더링 될 때마다 새로운 변수로 계속 선언되기 때문에 컴포넌트 바디 밖에서 선언하거나 따로 파일을 생성하여 분류하는 것이 좋다

CSS

1. reset.scss & common.scss
   a. 각각의 파일에서 따로 reset.scss 와 common.scss를 import 할 필요 없이 index.js에서 한 번만 import 해주기
   b. 브라우저의 디폴트 스타일 값을 초기화하기 위해 reset.scss 생성
   c. 모든 컴포넌트에 공통적으로 적용되어야 하는 스타일은 common.scss에 작성

2. variables.scss
   반복적으로 사용되는 색깔 변수나 mixin 등은 variables.scss, mixin.scss 등의 별도 파일로 분리하고 필요한 scss 파일에서 import 해서 사용

3. Sass의 nesting 활용
   CSS className 중복 오류를 막기 위해 최상위 태그의 클래스 네임을 컴포넌트의 이름으로 하고 종속 관계에 맞게 CSS 속성들도 nesting 한다.