4 React Tips to Instantly Improve Your Code

* 이 글은 4 React Tips to Instantly Improve Your Code를 번역하였습니다.

4 React Tips to Instantly Improve Your Code

1. 핸들러에서 함수 반환하기

핸들러에서 함수(예: 커링 기법)를 반환하여 중복 코드를 줄이고 효율성을 높일 수 있습니다.

export default function App() {
  const [user, setUser] = useState({
    name: "",
    surname: "",
    address: ""
  });

  const handleInputChange = (field) => {
    return (e) => {
      setUser((prev) => ({
        ...prev,
        [field]: e.target.value
      }));
    };
  };

  return (
    <>
      <input value={user.name} onChange={handleInputChange("name")} />
      <input value={user.surname} onChange={handleInputChange("surname")} />
      <input value={user.address} onChange={handleInputChange("address")} />
    </>
  );
}

2. 책임 분리

컴포넌트를 독립적인 서브 모듈로 나누어 관리하기 쉽게 만듭니다.

• UI 모듈: 시각적 표현 담당
• 로직/모델 모듈: 비즈니스 로직 포함 (예: 커스텀 훅)
• 라이브러리 모듈: 컴포넌트에 필요한 유틸리티 포함

예시

// utils.js
export async function getList(onSuccess) {
  try {
    const resp = await fetch("https://www.url.com/list");
    const data = await resp.json();
    onSuccess(data);
  } catch {
    showAlert({ text: "Something went wrong!" });
  }
}

export async function deleteListItem(id, onSuccess) {
  try {
    await fetch(`https://www.url.com/list/${id}`, { method: "DELETE" });
    onSuccess();
  } catch {
    showAlert({ text: "Something went wrong!" });
  }
}

export function trimName(name) {
  return name.slice(0, 30) + (name.length > 30 ? "..." : "");
}

// hooks.js
export function useList() {
  const [list, setList] = useState([]);

  const handleDeleteItem = useCallback((id) => {
    return () => {
      deleteListItem(id, () => {
        setList((prev) => prev.filter((x) => x.id !== id));
      });
    };
  }, []);

  useEffect(() => {
    getList(setList);
  }, []);

  return useMemo(() => ({
    list,
    handleDeleteItem
  }), [list, handleDeleteItem]);
}

// ListComponent.js
export function ListComponentItem({ name, onDelete }) {
  return (
    <div className="list-component__item">
      {trimName(name)}
      <div onClick={onDelete} className="list-component__icon">
        <DeleteIcon />
      </div>
    </div>
  );
}

export function ListComponent() {
  const { list, handleDeleteItem } = useList();

  return (
    <div className="list-component">
      {list.map(({ id, name }) => (
        <ListComponentItem
          key={id}
          name={name}
          onDelete={handleDeleteItem(id)}
        />
      ))}
    </div>
  );
}

3. 조건문 대신 객체 맵 사용하기

조건문을 객체 맵으로 대체하여 코드 가독성을 높이고 유지보수를 용이하게 만듭니다.

예시

const ACCOUNTS_MAP = {
  'vip': VipAccount,
  'usual': UsualAccount,
  'admin': AdminAccount,
  'moderator': ModeratorAccount,
};

function Account({type}) {
  const Component = ACCOUNTS_MAP[type];

  return (
    <div className='account'>
      <Component />
      <AccountStatistics />
    </div>
  );
}

4. 독립 변수는 React 생명주기 외부에 배치하기

React 컴포넌트 생명주기 메서드를 필요로 하지 않는 논리를 컴포넌트 외부로 분리하여 코드 가독성을 개선합니다.

예시

const DEFAULT_ITEMS = [1, 2, 3, 4, 5];

const toggleArrayItem = (arr, val) => {
  return arr.includes(val) ? arr.filter(el => el !== val) : [...arr, val];
}

function useItemsList() {
  const [items, setItems] = useState(DEFAULT_ITEMS);

  const handleToggleItem = (num) => {
    return () => {
      setItems(toggleArrayItem(items, num));
    }
  }

  return {
    items,
    handleToggleItem,
  }
}

---

< 참고자료 >

[사이트] # Medium

4 React Tips to Instantly Improve Your Code

<React> 4 React Tips to Instantly Improve Your Code