2월 인턴일지 (1) 📝 : 자잘한 코드 리뷰

오늘은 그냥 짧게 개선하면 좋을 코딩스타일을 적어놔야겠다.

1️⃣ form이나 filter와 같은 연관성 있는 여러개의 state를 타입이 object인 하나의 state로 선언하기!

다음은 포인트를 부여하기 위한 form이 있는 컴포넌트 코드의 일부이다.

⌨️ 코드 예시

💩 Before

  const [amount, setAmount] = useState(0);
  const [type, setType] = useState<PointSign>(null);
  const [reason, setReason] = useState('');
  const [detailReason, setDetailReason] = useState('');

  const handleChange = (e) => {
    const {
      target: { value, name },
    } = e;

    switch (name) {
      case 'amount':
        setAmount(value);
        break;
      case 'reason':
        setReason(value);
        break;
      case 'detailReason':
        setDetailReason(value);
        break;
      default:
        break;
    }
  };

input개수만큼 state를 선언한 위 코드를 다음과 같이 form state하나로 개선할 수 있다.

👍 After

const FORM_INITIAL_VALUE = {
  amount: 0,
  type: null,
  reason: '',
  detailReason: ''
}
// ... 
const [form, setForm] = useState(FORM_INITIAL_VALUE);

const handleChage = (e) => {
  const {
    target: { value, name },
  } = e;
  
  setForm({
    ...form,
    [name]: value
  })
}

[name]: value 자주 사용해보기!!

2️⃣ 이중 화살표 함수를 사용한 리팩토링!

💩 Before

const handleSignClick = (value) => {
  setSign(value);
};

<Button
  title="적립"
  onClick={() => handleSignClick(SignType.Plus)}
/>

위와 같이 사용하던 코드 스타일을

👍 After

const handleSignClick = (value) => () => {
  const e = {
    target: { value, name: 'sign' },
  };
  handleChange(e);
};

이렇게 함수를 반환하는 이중 화살표 함수를 사용하면

<Button
  title="적립"
  onClick={handleSignClick(data.sign)}
/>

onClick에 prop을 이전보다 깔끔히 전달할 수 있다.

2020-02-04

오늘은 크롤러 수정 및 추가하는 일과 앱/웹의 작은 버그들을 수정했다.
오늘도 코드 개선사항에 대한 내용 하나만 적는걸루 끝낼 것이다!

3️⃣

• 3항연산자(?:)보다 &&연산자 사용하기!
• jsx body안에서는 condition variable로 가능한 boolean만 사용하기

먼저 첫번째는 자주 받은 코드 리뷰 중 하나니까 스킵하고 두번째는 아래 코드를 통해 이해해보자

<div>
{!cart.length ? (
  <p>장바구니가 비었습니다.</p>
 ):(
  cart.map((product) => (
    <p>{product.name}</p>
  ))
)}
</div>

여기서 cart는 product 객체의 배열이다.
이렇게 코드를 작성한 이유는 cart의 길이가 0일때, 즉 장바구니가 비었을 때 cart.length는 0을 리턴하므로 !0가 true가 되어 '장바구니가 비었습니다'라는 문구를 출력하게 되고, cart.length이 0이 아닌 경우는 장바구니의 아이템 명을 출력하도록 하기 위해서이다.

하지만 cart.length는 엄밀히 boolean타입이 아니므로 다음과 같은 상황에서는 조심해야한다.

{cart.length && <p>items.map(({name}) => (<p>{name}</p>)</p>}

이 때 예를들어 cart에 5개의 아이템이 있다면, cart.length는 5가되고 출력은 5와 p태그를 모두 출력하게 된다!

따라서 화면에 예상치 못하게 숫자가 보이는 버그가 발생하고, 만약 이 코드가 react-native라면 Text태그 안에 쓰여지지 않은 문자이기 때문에 에러 또한 발생한다.

따라서 로직에서는 상관없지만 랜더링 할 때만큼은 {cart?.length === 0 && (<p>...</p>)}와 같이 확실한 boolean타입으로만 조건을 확인하는 것이 안전하다!!