eslint 관련

rule yoda

if ("red" === color) {
    // ...
}

literal value가 앞에와야한다.

요다가 말하는 방식(red is the color)에서 작명된
보통 영어에서 “Yoda is a jedi Master” 와 같이
s v o 순으로 말하는데,
요다는 “A jedi Master yoda is” 와 같이
o s v 순으로 말한거에서 착안

if (color = 'red') {
  // = 이 하나 빠졌다!
}
값이 할당되어 오류 체크가 힘들지만

if ('red' = color) {
  // = 이 하나 빠졌다!
}

yoda condition으로 오류 체크가 용이하다.

prop-types

eslint로 인해 prop types오류가 나게 되어 타입 지정을 해주는 라이브러리가 있어 이용하였다.

propTypes를 이용해 속성값의 타입 정보를 정의해 props의 타입 정보를 한눈에 파악할 수 있는데 typescript와 같은 이유에서 그 필요성이 있다.

원래 자체 제공이었지만 리액트 15.5부터 이동한 모양이다.

우선 설치

npm i prop-types

isRequired

필수 prop에 대한 정의로 .isRequired를 types뒤에 붙여준다

	Greeting.propTypes = {
  name: PropTypes.string.isRequired
};

여러가지 형태의 지정

// 열거형(enum)으로 처리하여 prop가 특정 값들로 제한되도록 할 수 있습니다.

optionalEnum: PropTypes.oneOf(['News', 'Photos']),
  

 // 여러 종류중 하나의 종류가 될 수 있는 객체
optionalUnion: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number,
  PropTypes.instanceOf(Message)
]),

// 특정 타입의 행렬
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

// 특정 타입의 프로퍼티 값들을 갖는 객체
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
  
//커스텀 함수를 짜는 것도 가능하다
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
  if (!/matchme/.test(propValue[key])) {
    return new Error(
      'Invalid prop `' + propFullName + '` supplied to' +
      ' `' + componentName + '`. Validation failed.'
    );
  }
})
};