가독성과 생산성을 고려한 컴포넌트 작성법

송나은·2021년 6월 21일

React

목록 보기

3/9

가독성과 생산성을 고려한 컴포넌트

유지 보수하기 쉬운 코드

인터페이스를 쉽게 파악할 수 있는 코드

컴포넌트 작성 순서

파일의 최상단: 속성값의 타입 정의
매개변수는 명명된 매개변수로 정의
-> 디버깅 용이!
파일의 최하단: 컴포넌트 바깥의 변수와 함수 정의. 상수 변수, 대문자 활용
-> 렌더링 시 불필요한 객체 생성을 피해 성능 향상!

MyComponent.propTypes = {
  //...
};

export default const MyComponent = ({prop1, prop2}) => {
   //...
}

const COLUMNES = [
  { id: 1, name: 'Naeun', age: 29 },
  { id: 2, name: 'Tomi', agr: 10 }
  ]
const URL_PRODUCT = '/api/products';

서로 연관된 코드는 한 곳으로 모으기: 코드가 복잡하다고 느껴진다면 각 기능을 커스텀 훅으로 분리하기
-> 재사용 용이! 재사용하지 않더라도 코드가 복잡한 경우 분리하기!

// CustomHook
const useWindowWidth = () => {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const onReSize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", onResize);
    return () => {
      window.removeEventListener("resize", onResize);
    };
  }, []);

타입 정의하기: prop-types

속성갑의 타입 정보를 정의할 때 사용하는 리액트 공식 패키지.
잘못된 속성값을 입력할 때 콘솔에 에러메세지를 출력한다.

User.propTypes = {
  male: PropTypes.bool.isRequired, // 필수 입력사항
  age: PropTypes.number,
  // 함수의 매개변수와 반환값에 대한 타입 정보는 정의할 수 없다.
  type: PropTypes.oneOf(["gold", "silver", "bronze"]), 
  onChangeName: PropsTypes.func,
  onChangeTitle: PropsTypes.func.isRequired // 필수 입력사항
};

정적 타입 언어: TypeScript

조건부 렌더링

&& 연산자 vs || 연산자

&& 연산자는 첫 false값 또는 마지막 값을 반환한다.
|| 연산자는 첫 true값 또는 마지막 값을 반환한다.

const v1 = 'ab' && 0 && 2 // 0 (= false)
const v2 = 'ab' && 1 && 2 // 2 (= 마지막 값)
const v3 = 0 || 'ab' || 2 // 'ab' (= true)
const v4 = 0 || '' || false // false (= 마지막 값)

Truthy & Falsy

Falsy 한 값 앞에 느낌표를 붙여주면 true로 전환된다.
console.log(!undefined) // true
console.log(!null) // true
console.log(!0) // true
console.log(!NaN) // true (NaN: Not a Number)
console.log(!![]) // true