[Day 46] React Etc(defaultProps, Loading Indicator, Page Component, StoryBook Config) + Code Formatter

컴포넌트 더 잘 활용하기

defaultProps

컴포넌트 클래스의 defaultProps 속성을 통해 props의 기본값을 지정해줄 수 있다. —> 이 기본값은 undefined prop은 대신할 수 있지만, null prop은 대신할 수 없다.

(언제 사용?) 컴포넌트의 props를 어떻게 쓰면 되는지에 대한 설명서를 작성하는 용도로 많이 사용한다.

(주의) props를 넘겨주지 않으면 defaultProps로 사용되기 때문에 props를 반드시 넘겨야 작동하도록 만들고 싶다면(즉, props가 넘어오지 않으면 에러를 띄우고 싶은 경우) 기본값을 null로 지정해준다.

사용법

class CustomButton extends React.Component {
  // ...
}

CustomButton.defaultProps = {
  color: 'blue'
};

또는--------------------------------------------------

// 정적 속성으로 지정한다.
class PostForm extends Component {
  static defaultProps = {
    // true가 주어지면, 편집 모드 스타일이 적용됨.
    editing: false
  }
  // ....
}

render() {
  return <CustomButton /> ; // props.color will be set to blue
}

Loading Indicator

요즘 로딩 인디케이터는 화면 전체를 가리지 않고, 최소한의 필요한 영역에만 달고 입력 요소를 disabled 처리한다. —> 즉, 통신이 진행중인 해당 영역을 제외하고는 모두 사용할 수 있도록 해주는 것이 좋다.

Page Component 분류법

Page Component

모든 화면에 사용되는 컴포넌트

큰 부분을 조합하는 컴포넌트

이전까지 사용했었던 Layout 컴포넌트는 여기에서 정의한다.

여기에서 상태관리, 뷰 렌더링 등등 해도 되긴 된다. —> 만약 Container, Presentational Component로 분리할 거라면 역할과 책임에 맞게 분리해줘야 한다.

Route Component의 component prop으로 사용된다.

import React, { Component } from 'react'
import Layout from '../components/Layout';
import PostDetail from '../containers/PostDetail'

export default class PostDetailPage extends Component {
  render() {
    return (
      <Layout title="게시물 내용">
        <PostDetail {...this.props} />
      </Layout>
    )
  }
}

Presentational Component

제일 작은 단위의 컴포넌트

작은 부분을 조합하는 컴포넌트

보여지는 부분(UI)을 그리는 컴포넌트

Container Component

Presentational Component를 감싸는 컴포넌트

Utils

Create-React-App으로 생성된 프로젝트에 eslint, prettier 설정하기

Etc

(중요!) 어떤 코드를 사용하는 입장에서는 코드의 구현 세부사항에 대해서 몰라도 쓸 수 있어야 좋은 것이다.

WebPack

(용어) EntryPoint - 의존성 분석을 시작하는 파일

Create-React-App 에서의 EntryPoint는 src/index.js

StoryBook 에서의 EntryPoint는 root/.storybook/config.js

StoryBook에서 스타일이 보이지 않는 이유는, EntryPoint가 다르기 때문이다. —> 따라서 StoryBook의 EntryPoint를 다시 설정해줘야 한다.