TIL : prop-types, 조건부 렌더링(가독성 향상), 컴포넌트의 재사용성 및 가독성

Chanho Yoon·2021년 5월 28일
1

기억보단 기록

목록 보기
5/8

오늘의 기록들

✅ prop-types

타입이 중요한 이유

자바스크립트는 동적 타입 언어로 타입에 대한 고민 없이 코드를 작성할 수 있다.
그래서 간단한 프로그램을 작성할 때에는 생산성이 좋기도하다.
하지만 큰 규모의 프로그램을 작성할 땐 오히려 생산성이 떨어진다 (typescript가 인기를 얻는 이유)

리액트에서는 속성값 타입을 정의할 수 있는 prop-types 패키지를 기본적으로 제공한다.

속성값 타입을 정의했을 때 생기는 장점으로는 타입을 정의하면 그 자체가 훌륭한 문서가 된다는 것이다.

사용법

npm install prop-types --save
import PropTypes from 'prop-types';
...
UserComponent.propTypes = {
  name : PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  location: PropTypes.string.isRequired,
}

export default function UserComponent ({name, age, location}) {
  ...
}

prop-types 타입 정보들

  • PropTypes.element : 리액트 요소
  • PropTypes.node : 컴포넌트 함수가 반환할 수 있는 모든 것
  • PropTypes.instanceof(className) : className으로 생성된 모든 객체
  • PropTypes.oneOf(['num1','num2']) : 배열에 포함된 값 중 하나를 포함
  • PropTypes.oneOfType([PropTypes.number, PropTypes.string]) : 타입중 하나 만족
  • PropTypes.arrayOf(PropTypes.number) : 특정 타입만 포함
  • PropTypes.shape({ color: PropTypes.string, width: PropTypes.number }) : 객체 속성 값 타입
  • PropTypes.objectOf(PropTypes.number) : 속성값이 타입이 모두 참이어야

prop-types npm 여기에 여러가지 타입에 대한 정보들이 자세히 잘 나와 있다. 보고 필요할때마다 사용하면 될 것 같다.

✅ 가독성을 향상시키는 조건부 렌더링 방법

조건부 렌더링을 무분별하게 사용하면 JSX 코드가 금방 복잡해지게 된다.
때에 따라 가독성을 향상시킬 수 있는 조건부 렌더링 방법이 있는데 잘 생각해서 때에 따라서 잘 적용해보자.

  • 삼항 연산자를 사용할 때 삼항연산자의 끝에 아무것도 렌더링(null) 되지 않을 땐 && 을 사용하는 것을 권한다.
  • 삼항 연산자보다는 && 연산자를 사용하여 조건부 렌더링을 구현하면 조금 더 가독성이 좋을 수 있다.

&& 연산자 조건부 렌더링을 할 때 주의 사항

<>
  {money && <span>{money}</span>}
  {memo && <span>{200 - memo.length}자 입력 가능</span>}
</>

위와 같이 있을 때 money에 0(number)가 들어오면 마지막으로 0을 평가하기 때문에 화면상에 0이 출력될 수도 있다. 이것을 boolean type으로 변환을 해줘야합니다. 또는 null을 비교할 수도 있습니다.

{!!money && <span>{money}</span>}
{money != null && <span>{money}</span>}
{memo != null && <span>{200 - memo.length}자 입력 가능</span>}

첫 번째 와 같이 !!을 두번 한 이유는 자바스크립트에서 명시적 형변환(bool)이 일어나기 때문입니다.

코드 리뷰어를 배려하는 마음으로 조건부 렌더링 코드를 작성하는 것이 좋다. (함께하고 싶은 개발자😃)

✅ 컴포넌트의 재사용성, 가독성

컴포넌트의 재사용성과 가독성을 올리려면 관심사의 분리가 필요하다.
관심사 분리란 비슷한 기능을 하는 코드끼리 모아서 별도로 관리하는 것을 말한다.
ui / serverAPI / DB... 등
연관된 컴포넌트끼리 폴더를 만들어 관리하면 규모가 커졌을 때 훨씬 해당 컴포넌트를 찾기도 쉬워진다.

재사용할 수 있는 컴포넌트 구분법

  1. 비지니스 로직이 없다.
  2. state(상태값)이 없다. (UI 효과를 위한 상탯값은 제외!)

components / container 폴더?

💡 마켓컬리와 에어비엔비 팀 프로젝트를 하면서 component 폴더는 단순히 분리한 컴포넌트를 넣어서 사용했었다. 하지만
components 폴더에는 재사용성이 높은 컴포넌트를 넣는다고 한다. (나의 생각도 그러한 것 같다)
container 폴더에는 상태값과 비지니스 로직을 관리하는 컴포넌트는 container 폴더로!!


참고
실전 리액트 프로그래밍👍🏻

0개의 댓글