8월 4주차 기록

배워가기

React render prop

• 자식 컴포넌트를 함수 형태로 렌더링하는 것

render() {
    return (
      <div>
        <ChildComponent>
          {
            ({ loading }) => <span>{loading}</span>
          }
        </ChildComponent>
      </div>
    )
  }

class ChildComponent extends Component {
  state = {
    loading: true,
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        loading: false,
      });
    }, 500);
  }

  render() {
    return (
      <div>
        {this.props.children({
          ...this.props,
          ...this.state,
        })}
      </div>
    );
  }
}

사용하는 이유

• 자식 컴포넌트인 ChildComponent는 자신의 로직을 다른 컴포넌트에 공개하지 않고도 상태를 스스로 관리할 수 있다.

• 자식 컴포넌트들에 필요한 값을 부모 컴포넌트로 끌어올리는 대신, 자식 컴포넌트 스스로 상태를 관리하게 함으로써 불필요한 리렌더링을 막을 수 있다.

• ChildComponent를 사용하는 부모 컴포넌트들에서 ChildComponent를 어떻게 렌더링할지 다양하게

재구성할 수 있다.

Ref https://www.codedaily.io/tutorials/Using-Functions-as-Children-and-Render-Props-in-React-Components

React composition pattern

React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋다.

이때 더 “구체적인” 컴포넌트가 “일반적인” 컴포넌트를 렌더링하고 props를 통해 내용을 구성할 수 있다.

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting our spacecraft!" />
  );
}

Ref

• https://ko.legacy.reactjs.org/docs/composition-vs-inheritance.html
• https://medium.com/@console_log/composition-pattern-을-react-component에-적용해보자-6bf82c564585

mobx @computed

mobx의 computed 값을 사용하여 다른 observable 정보를 얻을 수 있다다. computed 값은 느리게 평가하여 출력을 캐싱하고 observables 중 하나가 변경된 경우에만 다시 계산한다. 아무것도 관찰되지 않으면 완전히 작동을 멈춘다.

이는 저장해야 하는 state를 줄이는 데 도움이 되며 매우 최적화되어 있다. 가능한 모든 곳에 사용하는 것을 권장한다.

즉 observable 값을 가져오는 함수에 @computed 값을 붙여도, 안 붙여도 되지만, computed가 리턴하는 값이 변하지 않는 경우에는 캐싱을 하게 되므로 최적화에 유리하다.

Ref https://ko.mobx.js.org/computeds.html

이것저것 모음집

…

기타공유

Gitlab의 CI/CD Catalog

리모트 저장소에 있는 CI/CD 스크립트를 불러와 사용할 수 있다.

Ref https://gitlab.com/explore/catalog

마무리

오랜만에 제주도로 가족여행을 다녀왔다 😎

이제는 동생이랑 내가 예약도 운전도 다 하고

부모님은 돈만 내는(ㅋㅋㅋ) 여행.

날은 무지 뜨거웠지만 놀만큼 놀고 쉴만큼 잘 쉬다왔다.

앞으로도 이런 시간이 더 있기를~ 🦭