Design Pattern for Higher React Programming

이 문서는 리액 애플리케이션에서 사용되는 주요 디자인 패턴들을 설명합니다. 주요 내용은 다음과 같습니다:

• Container와 Presentation 패턴: 비즈니스 로직과 UI를 분리하여 관리하는 방법을 설명합니다.

• Container Component: 데이터 처리와 상태 관리를 담당하는 컴포넌트의 역할과 구현 방법을 다룹니다.

• Presentational Component: UI 표현에 집중하며 props를 통해 데이터를 받아 표시하는 방식을 설명합니다.

• 고급 패턴: HOC(Higher Order Component)와 Render Props를 통한 컴포넌트 로직 재사용 방법을 소개합니다.

• Hook 기반 분리: 커스텀 훅을 사용하여 로직을 분리하고 재사용하는 현대적인 접근 방식을 설명합니다.

Container/Representational Component

코드의 효율적인 관리를 위해 컨테이너와 렌더 컴포넌트를 분리하는 것이 좋습니다. 이는 유지보수성을 높이고 컴포넌트의 역할을 명확히 하며, 특히 대규모 애플리케이션에서 코드의 확장성과 테스트가 용이해집니다.

컨테이너 컴포넌트(container component)는 논리, 상태 관리, 데이터 페칭 등을 처리하는 컴포넌트입니다. API와의 상호작용을 통해 얻은 데이터와 콜백 함수를 자식 컴포넌트에 전달하는 역할을 합니다. 단, 시각적 표현이나 관련 로직은 직접 다루지 않습니다.

function UserContainer() {
	const [users, setUsers] = useState()
	useEffect(() => {
		fetch('/api/users')
		.then((res) => res.json())
		.then((data) => setUsers(data))
	}, [])
	
	return <UserList users={users}/>
}

프레젠테이셔널 컴포넌트(presentational component)는 사용자 인터페이스와 시각적 표현을 담당하는 컴포넌트로, 자체적인 상태 관리 없이 props에만 의존해야 합니다. 이러한 props는 상위 컨테이너 컴포넌트로부터 전달받습니다.

const UserList = ({ users }) => {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

HOC, High Order Class

컴포넌트를 입력받아 새로운 컴포넌트를 반환하는 함수로, 컨테이너 컴포넌트들 사이에서 공통된 로직을 재사용하는 데 효과적입니다.

const withUserData = (WrappedComponent) => {
  return () => {
    const [users, setUsers] = useState([]);

    useEffect(() => {
      fetch('/api/users')
        .then((res) => res.json())
        .then((data) => setUsers(data));
    }, []);

    return <WrappedComponent users={users} />;
  };
};

const UserListWithData = withUserData(UserList);

Render Props

요소 간의 로직을 공유하기 위한 특별한 함수 패턴으로, 컴포넌트가 자신의 렌더링 로직을 다른 컴포넌트와 공유할 수 있도록 props로 함수를 전달하는 방식입니다. 이를 통해 컴포넌트는 자신의 동작을 유연하게 확장하고 재사용할 수 있습니다.

const UserProvider = ({ render }) => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

  return render(users);
};

const UserContainer = () => {
  return (
    <UserProvider
      render={(users) => <UserList users={users} />}
    />
  );
};

Hook for Separation

논리와 상태를 캡슐화하기 위해 사용자 정의 후크(custom hook)를 사용할 수 있습니다. 이를 통해 컴포넌트의 가독성과 구조를 개선할 수 있습니다.

const useUsers = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

  return users;
};

const UserContainer = () => {
  const users = useUsers();
  return <UserList users={users} />;
};