[React] 리액트 코드를 개선할 수 있는 4가지 팁

TLDR

---

1. 이벤트 핸들러에 커링 활용
2. 컴포넌트 책임 분리
3. 조건문 대신 객체 map 사용
4. React 라이프사이클 외부에 독립적인 변수 배치

 

 

4 React Tips

---

1. 커링 활용

user 상태는 name, surname, address 3개 속성을 가지며, 이에 대응하는 3개의 input 필드가 필요하다. 아래 코드에선 각 필드를 처리하기 위해 별도의 핸들러를 각각 만들어서 사용하고 있지만, 이 핸들러들은 value가 할달될 속성 이름만 다를 뿐 나머지 로직이 동일하기 때문에 코드 중복이 발생하고 있다.

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

  const handleNameChange = (e) => {
    setUser((prev) => ({
      ...prev,
      name: e.target.value,
    }));
  };

  const handleSurnameChange = (e) => {
    setUser((prev) => ({
      ...prev,
      surname: e.target.value,
    }));
  };

  const handleAddressChange = (e) => {
    setUser((prev) => ({
      ...prev,
      address: e.target.value,
    }));
  };

  return (
    <>
      <input value={user.name} onChange={handleNameChange} />
      <input value={user.surname} onChange={handleSurnameChange} />
      <input value={user.address} onChange={handleAddressChange} />
    </>
  );
}

 

함수형 프로그래밍에서 자주 사용하는 커링은 n개의 인자를 받는 대신 n개의 함수를 만들어서 하나의 인자만 받도록 만드는 패턴이다.

currying is the technique of translating a function that takes multiple arguments into a sequence of families of functions, each taking a single argument.

— WikiPedia

 

커링 패턴을 적용하여 기존 이벤트 핸들러를 각 속성에 대응하는 함수를 반환하도록 만들면, 특정 필드에 맞는 핸들러를 동적으로 생성할 수 있어 중복 코드를 줄일 수 있다.

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")} />

      {JSON.stringify(user)}
    </>
  );
}

 

 

2. 책임 분리

1개 컴포넌트에 너무 많은 코드 라인을 포함하면 유지보수하기 힘들고 이해하기도 쉽지 않다. 이러한 컴포넌트는 아래와 같은 기준을 가지고 독립적인 하위 모듈로 분리하는 것이 좋다.

 

• UI 모듈 : 시각적인 표면만 담당
• Logic/Model 모듈: 비즈니스 로직만 포함 e.g., 커스텀 훅
• Lib 모듈: 컴포넌트에 필요한 유틸리티 모음

 

아래 ListComponent는 로컬 상태 관리, 데이터 패칭, 아이템 삭제 등 다양한 로직이 혼재되어 있다. 이 컴포넌트의 관심사를 분리하여 개선해보자.

export function ListComponent() {
  // 로컬 상태
  const [list, setList] = useState([]);

  // 서버에서 데이터를 가져온 후 로컬 상태를 업데이트하는 함수
  const fetchList = async () => {
    try {
      const resp = await fetch("https://www.url.com/list");
      const data = await resp.json();

      setList(data);
    } catch {
      showAlert({ text: "Something went wrong!" });
    }
  };

  // 컴포넌트가 처음 마운트 될 때 fetch
  useEffect(() => {
    fetchList();
  }, []);

  // 아이템 삭제 및 상태 업데이트 함수
  const handleDeleteItem = (id) => {
    return () => {
      try {
        fetch(`https://www.url.com/list/${id}`, {
          method: "DELETE",
        });
        setList((prev) => prev.filter((x) => x.id !== id));
      } catch {
        showAlert({ text: "Something went wrong!" });
      }
    };
  };

  // 리스트 뷰 렌더링
  return (
    <div className="list-component">
      {list.map(({ id, name }) => (
        <div key={id} className="list-component__item>">
          {/* 30자를 초과하는 이름은 ... 생략 부호 추가 */}
          {name.slice(0, 30) + (name.length > 30 ? "..." : "")}

          <div onClick={handleDeleteItem(id)} className="list-component__icon">
            <DeleteIcon />
          </div>
        </div>
      ))}
    </div>
  );
}

 

먼저 Model과 UI 모듈에서 사용할 유틸리티 함수를 분리한다.

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 {
    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 ? "..." : "");
}

 

상태 관리와 비즈니스 로직을 별도의 커스텀 훅으로 분리한다.

export function useList() {
  const [list, setList] = useState([]);

  // id를 받아 이를 처리하는 핸들러 반환
  const handleDeleteItem = useCallback((id) => {
    return () => {
      deleteListItem(id, () => {
        setList((prev) => prev.filter((x) => x.id !== id));
      });
    };
  }, []);

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

  return {
    list,
    handleDeleteItem,
  };
}

 

리스트 아이템을 별도의 컴포넌트로 분리하여 UI 모듈을 작성한다. 이렇게 하면 각 아이템의 렌더링 로직을 독립적으로 관리할 수 있다.

export function ListComponentItem({ name, onDelete }) {
  return (
    <div className="list-component__item>">
      {trimName(name)}

      <div onClick={onDelete} className="list-component__icon">
        <DeleteIcon />
      </div>
    </div>
  );
}

 

유틸리티 함수, 커스텀 훅, UI 컴포넌트 등의 모듈을 통합한다. 이로써 코드의 응집도(하나의 목적을 수행하기 위한 작은 기능들을 연관성에 따라 모듈에 잘 모아놨는지 여부)가 높아지고 유지보수가 더 용이해졌다.

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. 객체 map 사용

변수의 상태에 따라 다른 컴포넌트를 렌더링해야 할 때, 조건문을 사용하여 각 상태에 맞는 컴포넌트를 선택할 수 있다. 하지만 조건문이 많아질수록 가독성이 현저하게 떨어지는 단점이 있다. 객체 맵(map)을 활용하면 코드를 더욱 간결하고 선언적으로 작성할 수 있다.

function Account({ type }) {
  let Component = UsualAccount;

  if (type === "vip") {
    Component = VipAccount;
  }

  if (type === "moderator") {
    Component = ModeratorAccount;
  }

  if (type === "admin") {
    Component = AdminAccount;
  }

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

 

아래처럼 객체 맵 ACCOUNTS_MAP을 사용하여 type과 컴포넌트를 매핑하면 조건문 없이도 필요한 컴포넌트를 가져올 수 있다. type이 가지는 상태의 종류가 많아질 수록 이 방법이 특히 유용하다.

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. 독립적인 변수 배치

리액트의 라이프사이클 메서드를 필요로 하지 않는 로직은 컴포넌트에서 분리하는 것이 좋다. 이렇게 하면 컴포넌트가 렌더링될 때 불필요하게 재선언되는 것을 방지할 수 있고, 의존성이 더 명확해져서 코드 가독성이 좋아진다.

function useItemsList() {
  const defaultItems = [1, 2, 3, 4, 5];
  const [items, setItems] = useState(defaultItems);

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

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

  return {
    items,
    handleToggleItem,
  };
}

 

defaultItems 변수와 toggleArrayItem 함수는 특정 컴포넌트에 종속되지 않기 때문에 독립적인 유틸리티로 분리할 수 있다. 필요시 다른 곳에서 쉽게 재사용할 수도 있다.

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,
  };
}

 

 

레퍼런스

---

4 React Tips to Instantly Improve Your Code

 

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요