1.useContext & Context API

1.1 useContext와 Context API 사용법

• 장점: Props를 전역으로 간편하게 전달해줄 수 있다.
• 단점: 컴포넌트 재사용에 문제가 생긴다 (모듈로써의 기능을 잃음)
  cf.) 단순히 Prop Drilling을 피하기위한 목적이라면 Component Composition을 고려하자

src/store/users.js

import React, { userContext } from 'react';

export const UserContext = createContext(); [export해서 외부파일에서 사용해야하므로 !!]
//{userContext}라이브러리를 import해서, createContext()를 호출하면 context 객체를 리턴한다.
// 지금부터 `UserContext`는  data를 담을 context객체이다.

const UserStore = ({children}) => { 
  
const users ={ 
name: 'hyunjun',
job:'developer',
}

 return <UserContext.Provider value={users}>{children}</UserContext.Provider>
};

export default UserStore;

1. createContext()로 context객체 ( UserContext)를 생성함.
   // src/store/users.js
2. (users.js의 ) UserStore컴포넌트는
   <UserContext.Provider value={전달할 context data}/>를 return한다.
3. UserStore컴포넌트로 App컴포넌트를 감싸주면 App의 모든 하위컴포넌트에 useContext 훅으로 context data전달이 가능하다.
   // Provider컴포넌트로 context data를 value로 담아 랩핑
   // 하위컴포넌트에서 접근방법 ==> const context = useContext(UserContext)
   // console.log(context) //~. Provide value값

>src/views(pages)/About.js

import React, {useContext} from 'react';
import { UserContext } from '../store/users";

export default function About() [ 
const context = useContext(UserContext)  
//useContext()의 파라미터로 UserContext(createContext객체)를 넣어줌.
console.log(context) 
/*  const users ={ 
name: 'hyunjun',
job:'developer',
}*/

 return (
   <div>
    <h3>{context.name}</h3> // 'hyunjun'
   </div>
  );
}

Recap
1. createContext로 Context객체 생성.
2. Context.Provider value={context data}로 컴포넌트 랩핑
3. 하위컴포넌트에서 useContext(Context)로 context data 참조

2. Component Composition

2.1 컴포넌트 컴포지션(합성) 이란?

Component를 props처럼 넘겨주는 것을 말한다.

• 효과: Prop drilling을 방지할 수 있다.
  //prop drilling: 상위 레이어에서 하위 레이어의 컴포넌트에 단계별로 prop을 그대로 전달하는것.

• 소수의 컴포넌트 layer에선 프롭 드릴링이 문제되지 않지만,
  depth가 깊어진다면 상당히 까다로운 문제가 된다.
  => 해결책 : Component Composition !

const App = () => {
  const userName = 'Joe';

  return (
    <WelcomePage title={<WelcomeMessage userName={userName} />} />
  );
}

const WelcomePage = ({ title }) => {
  return (
    <>
      {title}
      {/** Some other welcome page code */}
    </>
  );
}

const WelcomeMessage = ({ userName }) => {
  return (
    <h1>Hey, {userName}!</h1>
  );
}

결과:

• App-> Welcomepage
• App-> WelcomeMessage
  WelcomeMessage 컴포넌트를 Props로 넘겨서 layer하나를 삭제하는 효과를 얻음.
  // 이제 WelcomeMesseage와 WelcomePage는 App과 하나의 레이어를 경계로 갖는다.
  //불필요한 컴포넌트의 렌더링을 막아 성능향상 효과를 얻을 수 있음!.

Reference:

• 별코딩 리액트훅스 : useContext & ContextAPI
  https://www.youtube.com/watch?v=LwvXVEHS638

• (Title : React Component Composition Explained )
  https://felixgerschau.com/react-component-composition/#:~:text=Component%20composition%20is%20the%20name,new%20components%20with%20other%20components.