Clean Code: 코드 청소하기

변수와 함수 가이드라인부터 시작하자

:: 깔끔한 코드를 작성해야 하는 이유는?

• 읽기 쉬운 코드는 보수하거나 개선하기 쉽다.

:: 우선 적용할 변수 가이드라인

• 직관적이고 간결한 이름 짓기
• 매개변수 기본값 활용 하기

:: 우선 적용할 함수 가이드라인

• 동작을 잘 설명하는 함수명 짓기
• 한가지 행동만 담당하기
• 중복된 코드를 추상화를 거쳐 제거하기

React Tricks

:: 커스텀 훅 사용하기

• 관심사 별로 상태와 로직을 묶어 관리하여 가독성 개선
• 편한 재사용

// 출처: https://ko.reactjs.org/docs/hooks-custom.html
// 커스텀 훅 적용 전 코드

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);
  
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

// 커스텀 훅 적용한 코드

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

:: ref 활용하기

• input 요소에서 입력할 때마다 state 업데이트가 일어나 발생하는 렌더링 감소

:: onBlur 이벤트 활용하기

• input 요소가 포커스를 잃을 때 할 행동을 정할 수 있다