feconf21-component.md

컴포넌트 다시 생각하기

https://www.youtube.com/watch?v=HYgKBvLr49c

리액트 컴포넌트의 의존성 파악하기

1. 스타일 ( CSS )
2. 커스텀 로직 ( UI 조작에 필요한 커스텀 로직, 컴포넌트에 필요한 사이드 이펙트 )
3. 전역 상태 ( 유저 액션을 통해 초래된 클라이언트의 상태, 로그인 정보, URI 표현 등등)
4. 리모트 데이터 스키마
   • API 서버에서 내려주는 데이터의 모양

리모트 데이터 스키마

• 대다수의 제품은 하나의 특정 동작을 원합니다. 로딩 인디케이터를 표시하며 필요한 모든 데이터를 가져온 다음, 데이터를 사용할 수 있게 되면 전체 뷰를 렌더링 한다.
• 케이크에 딸기를 새로 얹어 볼까요 ?
  • 케이크에 딸기를 추가하려면 생크림도 필요하다.
  • 딸기 케이크는 생크림에 추가적으로 의존한다.
  • 딸기 케이크의 숨은 의존성 : 생크림
• 리액트 컴포넌트에 새로운 정보를 추가 해볼까요?
• 새로운 정보를 추가하려면, 새로운 정보 뿐 아니라 숨은 의존성도 필요하게 된다.

시나리오

• 컴포넌트에 정보 새로 추가하기 (리모트 데이터)
• 컴포넌트의 Props 수정 (리액트 컴포넌트)
• 컴포넌트의 렌더링 부분 수정 ( 숨은 의존성 )
• 의 Props 수정 (숨은 의존성)
• 의 useEffect 훅 수정 (숨은 의존성)
• 새로운 정보를 추가하기 위해서는 해당 컴포넌트 뿐만 아니라 루트 컴포넌트와 중간에 있는 컴포넌트들을 필연적으로 수정하게 된다.
• 즉, 루트컴포넌트가 리모트 데이터 스키마가 가진 숨은 의존성이 된다.

함께 두기

• 비슷한 관심사라면 가까운 곳에 두기.
  • 파일들이 서로 멀어지게 되면 집중력이 분산 된다.
  • 같은 파일 / 가까운 곳에 두자.
  • 스타일과 로직은 함께 두기가 쉽다. (컴포넌트 내부에)
  • 리모트 데이터 스키마를 함께 두기 ?
    • Props 를 통해 리모트 데이터를 받게 된다면, 리모트 데이터는 Root 컴포넌트와 강한 의존성을 갖게 된다.
    • 어떻게 개선 할 수 있을까? 루트 컴포넌트에서는 id 만 내려 받고, 해당 id 로 컴포넌트에서 데이터 저장소와 소통한다.
• 데이터를 ID 기반으로 정리하기
  • 데이터 정규화 ( 노멀라이제이션 )
  • 정규화 된 데이터로 특정 객체를 저장소로부터 쉽게 가져올 수 있다.
  • 그런데..여기에도 숨은 의존성이 있다! 바로 모델을 상위 컴포넌트에서 정확히 알고 있어야 한다는 것
  • 이를 느슨하게 풀기 -> 전역 ID (Global ID)

이름 짓기 ( Props Naming)

• 의존한다면 그대로 드러내기.

before

interface Props {
    leftImageThumbnailUrl: string
    title: string
    title2: string
    caption: string
    rightDotColor: string
    leftDotColor: string

after

interface Props {
  userImageThumbnailUrl: string;
  userName: string;
  userNickname: string;
  userTotalFollowerCount: number;
  userLastActivityAt: Date;
}

// -> User 와 Image 간의 정보 연결하기

interface Props {
  user: {
    name: string;
    nickname: string;
    totalFollowerCount: number;
    lastActivityAt: Date;
    image: {
      thumbnailUrl: string;
    };
  };
}

재사용하기

• 컴포넌트를 재사용하는 이유?
  • 변경할 때 편리하기 위해서.
• 대부분은 리모트 데이터 스키마가 변하는 방향에 따라서 변화한다.
• 그렇다면 리모트 데이터 스키마의 변화에 어떻게 대응 할 수 있을까?

모델 기준으로 컴포넌트 분리하기.

• UI 기준이 아니라!
• 각자의 컴포넌트는 각자의 방향대로 변화할 것이다.
• 유저들이 생각하는 일관적인 경험 === 모델 기반
• 같은 모델을 의존하는 컴포넌트는 재사용하기.
• 다른 모델을 의존하는 컴포넌트는 분리하기.