React Design Pattern

Junbro·2022년 8월 8일

Design Pattern React frontend js vac

이번 개인 프로젝트(landSoundScape) 에서 VAC(View Asset Component) 패턴을 도입하였다.

1. VAC(View Asset Component)

VAC (View Asset Component)는 렌더링에 필요한 JSX와 스타일을 관리하는 컴포넌트를 의미한다.

VAC 패턴은 View 컴포넌트에서 JSX 영역을 Props Object로 추상화하고, JSX를 VAC로 분리해서 개발하는 설계 방법이다,.

이런 설계는 비즈니스 로직 뿐만 아니라 UI 기능 같은 View 로직에서도 렌더링 관심사를 분리하는데 목적이 있다.

VAC Container을 JSX, Style을 제외한 비지니스 로직, 상태관리 등을 맡고 VAC에서는 JSX, Style을 관리하여 렌더링을 담당한다.

결국, VAC 패턴은 기존의 컴포넌트에서 JSX 영역을 별도로 분리하여 협업시 충돌을 최소화하고, 컴포넌트의 역할을 확실하게 분리하는 것을 목적으로 한다.

2. 적용

이번 개인 프로젝트에서 VAC 패턴이 필요로 하는 부분에 적재적소에 적용시켰다.

VAC Container

function Search() {
  const { hideModal } = useModal();
  const [filter, setFilter] = useState("");
  const [debouncedFilter] = useDebounce(filter, 500);
  const { data } = useQuery(
    ["getPhotos", debouncedFilter],
    () => getPhotos(debouncedFilter),
    {
      enabled: Boolean(debouncedFilter),
      refetchOnWindowFocus: false,
    },
  );

  const SearchProps = {
    photos: data,
    onInputChange: e => setFilter(e.target.value),
    onPhotoClick: () => hideModal(),
  };

  return <SearchView {...SearchProps} />;
}

Fetching, CustomHook, state 등 비지니스 로직 상태 관련 코드 담당
‘Props Object’ 를 통해 VAC 컴포넌트에 전달
JSX 로직이 분리되어 있어 비즈니스 로직에 집중할 수 있었고 ‘VAC Debugger’을 통해 테스트를 진행

VAC

function SearchView({ photos, onInputChange, onPhotoClick }) {
  return (
    <SearchBarWrapper>
      <SearchBar
        type="text"
        placeholder="Search using tags related to photos."
        onChange={onInputChange}
      />
      <SearchIcon />
    </SearchBarWrapper>
    <PhotosWrapper>
      {photos?.map(photo => (
        <Link key={photo._id} to={`/${photo._id}`} onClick={onPhotoClick}>
          <PhotoEntry {...photo} />
        </Link>
      ))}
    </PhotosWrapper>
  );
}

SearchView.propTypes = {
  photos: PropTypes.array.isRequired,
  onInputChange: PropTypes.func.isRequired,
  onPhotoClick: PropTypes.func.isRequired,
};

const SearchBarWrapper = styled.div`
  display: flex;
  margin-top: 2rem;
  border: 0.3rem solid #265d6e;
  border-radius: 40px;
  justify-content: space-around;
  align-items: center;
  padding: 0.3rem 2rem;
`;

...