TIL 이미지

컴포넌트 스타일링

  • 방법
    • 스타일시트
    • Inline style
    • CSS in JS

  • Imotion 라이브러리 설치
  • 프래그마 지시문
    컴파일러에게 해당 파일을 어떻게 처리할지를 알리는 것.

useMemo

  • 최적화를 위해 필요한 훅 (함수의 재호출을 막는다)
  • 함수 컴포넌트는
    1. 자신의 상태가 변경될 때 리렌더링된다.
    2. prop이 변경될 때 리렌더링된다.
    3. 부모 컴포넌트의 상태가 변경되면 리렌더링된다.

“함수 컴포넌트가 렌더링된다 == 함수가 호출된다는 것을 의미”

리렌더링되면 함수가 재호출되고,
내부의 변수 및 함수가 다시 선언 및 실행된다.

  • useMemo(콜백 함수, 배열)
    콜백 함수: 기록해 둘 함수
    배열: 어떤 상태가 변경될 때 다시 실행할 것인가

  • React.memo
    부모 컴포넌트의 상태가 변경되더라도,
    자식 컴포넌트의 상태가 동일하면 리렌더링되지 않는다.

useCallback

  • 함수가 다시 선언(정의)되는 것을 막기 위한 훅

Custom Hook

  • 상태, 이벤트를 Custom Hook으로 만들어 관리할 수 있다.
  • 깔끔한 코드, 중복 제거 효과

더 알아보기

  • setState에서 값을 전달하는 것과 콜백 함수를 전달하는 것의 차이

보충 학습: git merge

fast-forward merges

  • master 브랜치에서 새로운 브랜치가 생성된 이후,
    master 브랜치에 다른 새로운 커밋이 없는 경우
  • history에 merge 되었다는 사실이 남지 않는다. 커밋이 남지 않는다.
  • merge 후 필요 없는 브랜치는 삭제하는 것이 좋다.
  • –no-ff: fast-forward merges 상황에서도 커밋을 남긴다.

three-way merges

  • 브랜치가 파생된 원래의 브랜치에서
    새로운 commit이 발생했다면 fast-forward merges가 불가능하다.
    (새 commit의 수정 사항을 반영하지 못하게 되기 때문이다)
    three-way merges를 사용해야 한다. 새로운 커밋을 만든다.

  • 메시지: merge made by the ‘recursive’ strategy
  • fast-forward merges가 가능한 경우라면, 자동으로 되고
    그렇지 않은 경우라면 three-way merges가 되면서 새 커밋을 생성한다.

참고자료

데브코스 50일차 강의