1023 TIL-U

Section 27 React 패턴 및 모범 사례

TIL1) 컴파운드 컴포넌트 소개

컴파운드 컴포넌트 패턴은 여러 개의 컴포넌트를 조합하여 더 복잡한 UI를 구성하는 방법이다. 이 패턴을 활용하면, 상태와 행동을 공유하는 컴포넌트를 만들 수 있어 코드의 가독성과 유지 관리성이 향상된다. 예를 들어, Accordion 컴포넌트를 구현할 때, AccordionItem과 같은 서브 컴포넌트를 만들어 상위 컴포넌트와 상태를 공유할 수 있다.

const Accordion = ({ children }) => {
  const [openIndex, setOpenIndex] = useState(null);

  const handleToggle = (index) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  return (
    <div>
      {React.Children.map(children, (child, index) =>
        React.cloneElement(child, {
          isOpen: openIndex === index,
          onToggle: () => handleToggle(index),
        })
      )}
    </div>
  );
};

const AccordionItem = ({ isOpen, onToggle, children }) => (
  <div>
    <button onClick={onToggle}>{isOpen ? 'Close' : 'Open'}</button>
    {isOpen && <div>{children}</div>}
  </div>
);

TIL2) 재사용성 및 구성 가능성을 위한 추가적인 컴포넌트 추가하기

컴포넌트를 설계할 때, 재사용성과 구성 가능성을 고려하는 것이 중요. 이를 위해, 다양한 옵션을 props로 전달하거나, 스타일링을 위한 클래스를 외부에서 정의할 수 있게 하면 좋다. 예를 들어, 버튼 컴포넌트를 만들 때, 기본 스타일을 제공하면서도 사용자가 원하는 스타일을 추가할 수 있도록 하면 유용하다.

const Button = ({ onClick, children, className }) => (
  <button className={`default-button ${className}`} onClick={onClick}>
    {children}
  </button>
);

TIL3) 렌더 프롭 소개 및 사용하기

렌더 프롭 패턴은 컴포넌트가 함수를 props로 받아, 해당 함수의 반환값을 렌더링하는 방식이다. 이 패턴을 사용하면, 컴포넌트 간의 재사용성을 높이고, 특정 로직을 공유하는 데 유용하다. 예를 들어, API 데이터를 가져오는 컴포넌트를 작성할 수 있다.

const DataFetcher = ({ render }) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(setData);
  }, []);

  return render(data);
};

// 사용 예
<DataFetcher render={(data) => (
  <div>{data ? data.message : 'Loading...'}</div>
)} />

위의 예시들로, 더욱 구조적이고 유지보수하기 쉽게 만들어 준다. 이러한 패턴을 적절히 활용하면, 코드의 재사용성과 가독성을 높일 수 있다더랑.