2월 인턴일지 (3) 📝:React, ts 코드리뷰

2월 동안의 코드리뷰 되새기기!

✨ (JS) 배열에서 arr?.length > 0 조건문이 유용할 때가 많음

• arr가 null, undefined, 비었을 경우 모두 걸러준다

코드참고)

const isLabelChanged: boolean =
    !!removal &&
    !!removal.inputLabel &&
    removal.inputLabel.length !== 0;

const isLabelChanged: boolean = removal?.inputLabel?.length > 0;

✨ (React) 컴포넌트의 prop이 boolean 타입인 경우 prop명만 넘겨주는 것은 값이 true라는 뜻

코드참고)

<Section title="댓글" isHighlighted={true} />

<Section title="댓글" isHighlighted />

✨ (JS) 주석을 남기면 좋을 곳은 JSDoc로 주석을 남기는 것도 좋다

코드참고)

/**
 * Return [borderColor, backgroundColor, color] according to selected, isPurchasable parameter
 *
 * @param {boolean} selected
 * @param {boolean} isPurchasable
 * @returns {string[]} 
 */
const getColor = (selected: boolean, isPurchasable: boolean) => {
  // 중략
}

✨ (TypeScript) Type assertion이 Type conversion(형변환)과 같은게 아니다!

<ItemPrice {...(props as Omit<ItemPriceProps, 'size' | 'isSoldout'>)} />

즉 이렇게 props에 Omit을 사용해서 size와 isSoldout을 제거한 타입을 지정해준다해도 ItemPrice에는 size, isSoldout을 다 넘겨줌!
Type assertion은 그냥 타입을 추론하는 것 뿐이고 runtime에서 의미가 없음

✨ (React) Component는 jsx를 return/render하는 모듈을 뜻하고,
이미 그려진 jsx, html은 Element이다!

✨ (React-Native) ios와 android에 따라 다르게 설정해 줄 때 Platform import해서 사용

import { Platform } from 'react-native';

// ...
<KeyboardAvoidingView
	behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
	keyboardVerticalOffset={Platform.OS === 'ios' ? 40 : 0} > 
  // ...

</KeyboardAvoidingView>

읽어보면 좋을 자료

👉 올해 버려야 할 ts 나쁜 버릇 10 가지