[TIL] 컴포넌트 코드 분리하는 기준

1. 비즈니스 로직과 상태값의 유무

✅ 재사용성이 좋은 컴포넌트 정의

• 비즈니스 로직이 없다.
• 상태값이 없다. 단 마우스 오버와 같은 UI효과를 위한 상태값은 제외

✅ 컴포넌트화 작업 전

import React, { useState } from "react";
import { getNextFriend } from "./data";

export const Friend = () => {
  const [friends, setFriends] = useState([]);
  const [ageLimit, setAgeLimit] = useState(MAX_AGE_LIMIT);
  const friendWithAgeLimit = friends.filter((item) => item.age <= ageLimit);

  function onAdd() {
    const friend = getNextFriend();
    setFriends([...friends, friend]);
  }

  function onChangeOption(e) {
    const value = Number(e.currentTarget.value);
    setAgeLimit(value);
  }

  return (
    <div>
      <button onClick={onAdd}>친구 추가</button>
      <div>
        <select onChange={onChangeOption} value={ageLimit}>
          {AGE_LIMIT_OPTIONS.map((option) => (
            <option key={option} value={option}>
              {option}
            </option>
          ))}
        </select>
        세 이하만 보기
      </div>
      <ul>
        {friendWithAgeLimit.map((friend) => (
          <li key={friend.id}>{`${friend.name} (${friend.age})`}</li>
        ))}
      </ul>
    </div>
  );
};

const MAX_AGE_LIMIT = 100;
const AGE_LIMIT_OPTIONS = [15, 20, 25, MAX_AGE_LIMIT];

✅ 컴포넌트 작업 후

App.js❗️

import React, { useState } from "react";
import { getNextFriend } from "./data";
import FriendList from "./component/FriendList";
import NumberSelect from "./NumberSelect";

const App = () => {
  const [friends, setFriends] = useState([]);
  const [ageLimit, setAgeLimit] = useState(MAX_AGE_LIMIT);
  const friendWithAgeLimit = friends.filter((item) => item.age <= ageLimit);

  function onAdd() {
    const friend = getNextFriend();
    setFriends([...friends, friend]);
  }

  return (
    <div>
      <button onClick={onAdd}>친구 추가</button>
      <NumberSelect
        value={ageLimit}
        option={AGE_LIMIT_OPTIONS}
        lable="세 이하만 보기"
        onChange={setAgeLimit}
      />

      <FriendList friends={friends} />
    </div>
  );
};

const MAX_AGE_LIMIT = 100;
const AGE_LIMIT_OPTIONS = [15, 20, 25, MAX_AGE_LIMIT];

export default App;

NumberSelect.js❗️

import React from "react";

const NumberSelect = (value, options, onChange, lable) => {
  function onChangeOption(e) {
    const value = Number(e.currentTarget.value);
    onChange(value);
  }

  return (
    <div>
      <select onChange={onChangeOption} value={value}>
        {options.map((option) => (
          <option key={option} value={option}>
            {option}
          </option>
        ))}
      </select>
      {lable}
    </div>
  );
};

export default NumberSelect;

FriendList.js❗️

import React, { useState } from "react";
import { getNextFriend } from "../data";

const FriendList = ({ friends }) => {
  return (
    <ul>
      {friends.map((friend) => (
        <li key={friend.id}>{`${friend.name} (${friend.age})`}</li>
      ))}
    </ul>
  );
};

export default FriendList;