React 2

cjfals3154·2022년 3월 2일
0

React

목록 보기
2/2

1. useMemo

  • 성능을 최적화 하기 위해서 연산 된 값을 재사용 한다.
    ex) 일기 개수에는 변화가 없는데 리랜더링 될 때마다 개수를 분석하는 함수가
    재실행 된다면 성능이 낭비된다. 그렇기 때문에 useMemo를 사용하여
    일기의 개수가 변할 때만 실행되도록 할 수 있다.

2. React, memo

  • 함수형 컴포넌트한테 업데이트 조건을 걸어서
    불필요하게 리랜더링 되는 상황을 막는다.
  • 고차컴포넌트 : 함수를 호출해서 매개변수로 컴포넌트를 전달하면 더 좋아진 컴포넌트로 만들어준다.

3. useCallback

  • 메모이제이션 된 콜백을 반환한다.
    두번째 인자[ ] 안에 값이 변화하지 않는다면 첫번째 인자로 계속 사용할 수 있다.

4. useRef

  • 특정 DOM을 지정할 때 그 돔에 접근할 수 있게 해주는 Hook 함수이다.
  1. useRef( )를 사용해서 객체를 만들고
  2. 객체를 활용해서 .current.focus( )
  3. 만든 Ref 객체를 선택하고 싶은 DOM 값 설정

5. useLoaction

    1. useLoaction은 location 객체를 반환한다.
    1. loaction은
      2-1 pathname : url도메인 다음의 1부터 문자열
      2-2 search : pathname 다음의 ? 부터의 문자열
      2-3 hash : pathname 다음의 # 부터의 문자열
      2-4 state : location 객체로 화면을 이동 시킬 때 코드
      2-5 Key : history stack에서 location 객체를 찾기
    1. 화면이동 시 보통 path를 통해서 통과시키지만
      but 세밀한 컨트롤을 위해서는 loaction 객체를 통과 시켜서 작동함
    1. location 객체로 화면 이동을 시키는 건 Route와 Switch 덕분에
      그렇게 보이는 것 뿐이지 직접적인 이동은 없다.

6. React.createContext

  • 단계마다 일일이 props를 넘겨주지 않아도 컴포넌트 트리에 전체적으로 데이터를 뿌려주는 기능을 함
profile
쉬운 일이었다면 나에게까지 오지 않았을 것

0개의 댓글