[ TIL ] 2022-06-21

Tips

• notion 에 github 잔디 연동하기( pdf 로 내려받으면 이미지로 보이지 않기 때문에, 연동 후 이미지로 저장하여 붙여 넣는 것이 더 낫다 )
  참고 블로그

• Redux 에서 React-query 로 옮겨간 기업들 기술 블로그

  카카오톡
  https://tech.kakao.com/2022/06/13/react-query/
  카카오페이
  https://tech.kakaopay.com/post/react-query-1/
  우아한형제들
  https://techblog.woowahan.com/6339/

CSS

• CSS 를 잘 쓰는 것도 성능 향상을 돕는다. GPU 를 쓰는 속성, CPU 를 쓰는 속성으로 구분할 수 있음.
• CSS cascading 참고
• 랜더링 성능을 향상시키는 CSS 속성 참고
• CSS GPU 애니매이션 참고

React

합성(Composition)과 상속(Inheritance)

(공식 문서)

• React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋다.
• React에서 prop으로 전달할 수 있는 것에는 제한이 없다.
• React는 컴포넌트 내에서 다른 컴포넌트를 참조할 수 있고, 모든 세부 단계에서 동일한 추상 컴포넌트를 사용할 수 있다.

합성의 예시

1) 어떤 자식 요소가 들어올 지 예상할 수 없을 때, children prop 을 통해 자식 컴포넌트를 그대로 전달하는 것

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

2) 일반 컴포넌트를 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!" />
  );
}