[Udemy React 완벽 가이드] Section 9

Prop Drilling 이해 & 프로젝트 개요

 

프로퍼티 내리꽂기(prop drilling)는 여러 층의 컴포넌트를 거쳐 공유하고자 하는 데이터를 넘겨주는 것

다수의 컴포넌트를 거쳐 속성을 전달하는데 사실 대부분의 컴포넌트가 그 데이터를 직접적으로 필요로 하는 게 아니라 그저 자식 컴포넌트에게 전달하는 역할을 맡게 되는 것이다

 

Prop Drilling: 컴포넌트 구성으로 해결하기

 

프로퍼티 prop drilling의 해결책은 컴포넌트 합성

 

컨텍스트 API 소개

 

컴포넌트 합성 외에 다른 해결방안은 컨텍스트 API이다

리액트를 구성하는 하나의 특성이라고 할 수 있는데 컴포넌트나 컴포넌트 레이어 간의 데이터 공유를 용이하게 해 준다

리액트의 컨텍스트 기능은 컨텍스트 값을 생성하고 해당 값을 제공하고 컨텍스트를 묶어주는데 다수의 컴포넌트 또는 앱의 모든 컴포넌트를 묶어주는 것에 있다

컨텍스트 값의 장점은 state와의 연결이 쉽다는 것이다

리액트 상태를 해당 컨텍스트 값에 연결하면 앱 전체에 제공되는 방식으로 사용된다

여러 컴포넌트 레이어를 통해 상태를 전달하거나 상태 업데이트 기능을 전달할 필요가 없어지는 것

대신 상태에 연결된 컨텍스트 값이 앱의 모든 컴포넌트에 제공되는데 상태에 접근이 필요하거나 변경하거나 읽어야 하는 컴포넌트의 경우 직접적으로 해당 컨텍스트 또는 필요한 상태에 접근이 가능하게 되는 것

 

컨텍스트 소개 및 부여

 

컴포넌트 합성 외에 다른 해결방안은 컨텍스트 API이다

컴포넌트 이름에 온점이 들어간 건 특정 오브젝트 안에 중첩된 속성이 실질적인 컴포넌트가 되는 경우 JSX 파일로써 유효해진다는 것

중첩된 속성의 값이 유효한 리액트 컴포넌트라면 이를 컴포넌트로 사용 가능하다

Provider 속성은 유효한 리액트 컴포넌트를 가지고 있다

 

컨텍스트 소비

 

useContext 훅은 어떤 컴포넌트의 함수일지라도 컨텍스트 값에 접근해 이를 사용할 수 있도록 해 준다

<CartContext.Provider value={ctxValue}>

이 객체에 값 속성을 설정해 주고 컨텍스트 값 또한 제공해야 한다

 

컨텍스트와 state 연결하기

 

상태를 수정하려면 컴포넌트에게 속성을 전달하는 방식을 사용해야 한다

컨텍스트의 사용은 읽히는 값을 제공하는 것뿐 아니라 값이나 함수를 불러와서 상태를 변경해 줄 수 있다

컨텍스트를 사용해 값과 상태 업데이트용 기능을 가진 함수를 앱 안의 여러 컴포넌트와 공유하는 방법

 

컨텍스트를 소비하는 여러 가지 방법

 

useContext 훅은 컴포넌트의 기능적 함수를 컨텍스트와 연결하고 그 함수 내에서 해당 컨텍스트 값을 사용 가능하게 만드는 것

 useContext를 사용하는 것이 컴포넌트 안의 컨텍스트에 접근할 때 일반적으로 사용하는 방법

<CartContext.Provider value={ctxValue}>

Provider 컴포넌트는 컨텍스트 값을 필요로 하는 모든 타 컴포넌트에 이를 제공하기 위해 필요

이 컴포넌트 외에도 우리가 사용 가능한 또 다른 컴포넌트를 제공하는데 이게 Consumer 컴포넌트

Consumer 컴포넌트는 특수한 자식 속성을 필요로 하는데 시작 및 종료 태그 사이로 전달되는 특별한 내용을 담는 건데 이게 바로 함수

시작 및 종료 태그 사이에 자식으로서 기능성 함수 전달하면 해당 함수는 백엔드에서 리액트에 의해 실행

 

컨텍스트 값이 바뀌면 생기는 일

 

우리가 컴포넌트의 컨텍스트 값에 접근할 때 해당 값은 그 값에 접근하는 컴포넌트의 함수를 바꾸고 업데이트된 내부 상태가 사용되었거나 부모 컴포넌트가 다시 실행되었다거나 컴포넌트 함수가 재실행되는 것과 같이 리액트에 의한 재실행이 이루어진다

재실행이 진행되는 또 다른 상황은 컴포넌트 함수가 useContext 훅을 사용함으로써 관련 컨텍스트 값에 연결되었을 때이다

이런 상황에서 UI 업데이트 진행을 위해 컴포넌트는 필히 재실행되어야 해당 값은 변경된다

 

컨텍스트 아웃소싱 & 분리된 제공자 컴포넌트에 State(상태) 부여

 

컨텍스트 기능은 앱 내의 여러 컴포넌트 간의 데이터 공유에 매우 유용하다

컨텍스트를 사용할 모든 컴포넌트에 대한 접근 권한을 갖고 있는 앱 컴포넌트는 root 컴포넌트이므로 엄청난 양의 로직이 쌓이게 된다

이를 대체할 접근법은 컨텍스트 관련 데이터 관리를 앱 컴포넌트가 아닌 별개의 컨텍스트 컴포넌트에 넣을 수 있도록 해주는 것

컨텍스트와 상태 관리 코드 모두를 별개의 컴포넌트로 외부에서 가져오면 동일한 앱 내의 여러 개의 컨텍스트와 여러 조각의 독립 데이터가 있더라도 여러 개의 컨텍스트 파일을 생성해 사용함으로써 앱 컴포넌트는 가볍게 유지 가능

 

useReducer 훅 소개

 

복잡한 리액트 앱을 만들 때는 컨텍스트가 다수의 컴포넌트 간의 상태 공유를 돕기 때문에 매우 중요한 기능이 될 수 있다

리액트에서는 useState와 같은 코드를 사용해 상태 관리를 하는 대신 useReducer라는 상태 관리용 훅을 사용하기도 한다

리듀서는 대개 하나 또는 그 이상의 복잡한 값을 더 단순한 형태로 만드는 함수

useReducer 훅은 상태 관리의 목적을 가지고 하나 또는 그 이상의 값을 보다 단순하게 하나의 값으로 줄이는 것

useReducer은 두 개의 요소를 가진 배열을 만들어 내는데 useState가 항상 두 개의 요소를 가진 배열을 만드는 것과 동일하다

const [shoppingCartState, shoppingCartDispatch] = useReducer(
    shoppingCartReducer,
    {
      items: [],
    }
  );

두 번째 요소는 dispatch 함수로 action을 보낼 수 있는데 보내진 액션은 추후 리듀서 기능에 의해 사용된다