[React] Udemy 강의 노트 11-2

 

 

 

리액트 Portal 을 통해 모달 추가하기

- 리액트 포털로 컴포넌트를 내가 원하는 DOM 트리의 특정 위치에서 렌더링 하여 사용할 수 있다.

- 포털을 이용하기 위해 public 폴더에 index.html에서 수정을 해주어야 한다. 

-div.root 위에 overlays라는 id를 갖는 div를 추가해 모달과 백드롭을 포털한다.

 

 

 

카트 및 모달 State 관리

- 장바구니가 보이는 state와 보이지 않는 state가 있다.

- state 가 둘 이상이면 리액트로 state를 관리해야 한다.

- 리액트가 이 컴포넌트에 대해 state를 관리하고 최신 state 스냅샷에 접근한다.

- 함수를 갖는 프롭스 이름에 대한 규약은 on으로 시작하는 것이다.

 

 

 

장바구니 컨텍스트 추가

- 장바구니 데이터를 컨텍스트로 관리한다 

- 해당 데이터는 앱 전체에서 사용되기 때문이다. 

- store 폴더를 src 밑에 생성한다.

- cart-context.js 파일을 추가하고 createContext를 이용해 context를 불러준다. 

- 컨텍스트를  useState나 useReducer로 관리하기 위해서 컨텍스트ㅜ도 시간에 따라 변경되고 애플리케이션의 일부도 시간에 따라 변경되도록 해본다.

- CartProvider.js 를 추가한다. 

- <CartContext.provider>를 추가하여 이 컨텍스트에 접근해야 하는 컴포넌트를 CartContext.provider 컴포넌트로 감쌀 수 있다.

- 컨텍스트 데이터를 관리하는 로직을 모두 이 컴포넌트에 추가할 수 있다.

- 모든 것이 하나의 컴포넌트에 포함되어 다른 컴포넌트는 이걸 다룰 필요가 없어진다.

 

 

 

컨텍스트 사용

- reduce는 데이터 배열을 값 하나로 변환해주는 메소드다.

 

 

 

장바구니 리듀서 추가

- 장바구니 항목을 추가하려면 CartProvider로 이동해야 한다. 거기서 장바구니 데이터를 관리하기 때문이다.

- 컨텍스트의 영향을 받는 모든 컴포넌트는 장바구니 데이터가 변경될 때마다 재평가 된다.

- concat은 push 처럼 기존 배열에 추가하는 것이 아니라 새 배열을 반환해준다.

- 이것은 완전히 새로운 state 객체를 생성하여 반환하는 것이다.

- 메모리에서 이전 배열을 편집하는 대신에 사용한다.

 

 

 

 

Refs 및 ForwardRefs 작업하기

- 컴포넌트 함수를 React.forwardRef로 감싼다. 그러면 그 컴포넌트 함수는 forwardRef의 인수가 된다.

- 그럼 두 번째 매개변수로 ref를 얻을 수 있다. 

 

 

- 이것이 forwardRef다. 

 

 

 

 

장바구니 항목 출력하기

- bind는 향후 실행을 위해 함수를 사전에 구성한다.

- 기본적으로 함수가 실행될 때 받을 인수를 미리 구성할 수 있다. 

 

 

더 복잡한 리듀서 로직 작업하기

-

 

 

아이템을 이동식으로 만들기

-

 

 

useEffect 훅 사용하기

- 전통적인 사이드 이펙트를 구현하기 위해서 useEffect 를 사용한다.

- 애니메이션 클래스가 조건부로 추가될 때를 확인하기 위하여 useState를 사용한다.

- useEffect 에서 함수를 return 하면 리액트에 의해 클린업 함수로 자동으로 호출된다.