TIL 22.08.11 | DnD, React.memo(), TS interface

HyeonWooGa·2022년 8월 11일
0

TIL

목록 보기
13/39
  1. DragDropContext 컴포넌트의 onDragEnd 프롭(함수) 는 매개변수 args 를 통해 다양한 정보를 제공합니다. //콘솔로그, DnD

  1. Array.prototype.splice() 를 통해 요소 옮기기 (Mutable)
    • Array.prototype.splice(시작점, 삭제갯수, [, 삽입할 값])
    • x.splice(0,1) : index 0 요소를 삭제
    • x.splice(2, 0, "a") : index 2 에 "a" 삽입

  1. useRecoilState 의 set 함수에서 함수를 이용하여 현재값에 대한 출력값으로 상태 변경을 할 수 있다.
    • oldToDos : 현재 상태값

  1. 타입스크립트에서 Props 로 객체를 내려줄때 interface 설정해줘서 넘겨줘야함

  1. State 가 업데이트되서 리렌더링 될때, 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트도 매번 리렌더링 된다. 당연히.
    • 부모의 State 가 바뀌면 자식의 Props 리렌더링
    • 정말 좋은 기능이지만 가끔은 과도하게 리렌더링되는 경우 발생
    • 아주 큰 부모 컴포넌트의 스테이트가 바뀔 때 수많은 자식 컴포넌트 모두 리렌더링 되면 성능 문제 발생

6. 과도한 리렌더링 막기위해 React.memo() 가 있다.

  • "제발 이 컴포넌트는 렌더링하지 말라고" 말하는 역할, prop 이 변경되지 않는다면!
  • 리액트한테 prop 이 바뀌지 않는다면 컴포넌트를 렌더링 하지 말라고 한다.
  • 대부분의 경우에 필요한 것이 아니라 특별히 렌더링 하는 요소(api,state) 가 여러개인 컴포넌트에서 사용한다.
  • 고차 컴포넌트 (Higher Order Component)

  1. DnD 를 활용하는 리스트는 리액트 개발자라면 꼭 필요하게 될것 그때 우리는 Beautiful-DnD 를 활용하여 구현하자

  2. atom 에 interface 주는 방법
    • toDos 의 key(보드) 를 유저가 더 생성 할 수 있으니까 확장성을 고려해서 아래와 같이 인터페이스 설정합니다.

profile
Aim for the TOP, Developer

0개의 댓글