오늘의 기록들
✅ prop-types
타입이 중요한 이유
자바스크립트는 동적 타입 언어로 타입에 대한 고민 없이 코드를 작성할 수 있다.
그래서 간단한 프로그램을 작성할 때에는 생산성이 좋기도하다.
하지만 큰 규모의 프로그램을 작성할 땐 오히려 생산성이 떨어진다 (typescript가 인기를 얻는 이유)
리액트에서는 속성값 타입을 정의할 수 있는 prop-types 패키지를 기본적으로 제공한다.
속성값 타입을 정의했을 때 생기는 장점으로는 타입을 정의하면 그 자체가 훌륭한 문서가 된다는 것이다.
사용법
npm install prop-types --saveimport 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... 등
연관된 컴포넌트끼리 폴더를 만들어 관리하면 규모가 커졌을 때 훨씬 해당 컴포넌트를 찾기도 쉬워진다.
재사용할 수 있는 컴포넌트 구분법
- 비지니스 로직이 없다.
- state(상태값)이 없다. (UI 효과를 위한 상탯값은 제외!)
components / container 폴더?
💡 마켓컬리와 에어비엔비 팀 프로젝트를 하면서 component 폴더는 단순히 분리한 컴포넌트를 넣어서 사용했었다. 하지만
components 폴더에는 재사용성이 높은 컴포넌트를 넣는다고 한다. (나의 생각도 그러한 것 같다)
container 폴더에는 상태값과 비지니스 로직을 관리하는 컴포넌트는 container 폴더로!!
