Data Masking

• Relay 에서 제공하는 기능
• 각 컴포넌트 간 관심사를 분리하고 의존성 제거 가능, 즉 Fragment-Driven-Development을 위한 기능.
• 자식이 사용하는 fragment data 에 대하여 마스킹(캡슐화)를 하여 부모가 이 데이터에 대해 알지 못하게 하는 것.
• 부모와 자식 간의 관심사를 완전히 분리하고, 마스킹 되어있던 데이터는 자식으로 내려와 언마스킹을 하여 사용하는 것이다.
• 즉, 데이터를 prop 으로 받는게 아니라 마스킹된 데이터로 받고 자식 컴포넌트에서는 언마스킹을 하여 사용하는 것

Data Masking 예시

// UserFragment.js
import { graphql } from 'react-relay';

export const UserFragment = graphql`
  fragment UserFragment on User {
    id
    name
    email
  }
`;

// UserComponent.js
import React from 'react';
import { createFragmentContainer } from 'react-relay';
import { UserFragment } from './UserFragment';

const UserComponent = ({ user }) => (
  <div>
    <p>{user.name}</p>
    <p>{user.email}</p>
  </div>
);

export default createFragmentContainer(UserComponent, {
  user: UserFragment,
});

// ParentComponent.js
import React from 'react';
import { createFragmentContainer, graphql } from 'react-relay';
import UserComponent from './UserComponent';

const ParentComponent = ({ viewer }) => (
  <div>
    {viewer.users.map(user => (
      <UserComponent key={user.id} user={user} />
    ))}
  </div>
);

export default createFragmentContainer(ParentComponent, {
  viewer: graphql`
    fragment ParentComponent_viewer on Viewer {
      users {
        ...UserFragment
      }
    }
  `,
});