Context? 🤔

• 컴포넌트의 속성은 원래 부모 → 자식 의 형태로 어떤 정보를 전달하게 된다.
• → 만약 부모가 직계 자식이 아닌 손자, 증손자 컴포넌트에게 전달하는 경우를 예로 들면
• → → 여간 번거로운게 아닐 수 없다 ☹️

<자식_컴포넌트 shared_props={shared_props} />;

({ shared_props }) => <손자_컴포넌트 shared_props={shared_props} />;

({ shared_props }) => <증손자_컴포넌트 shared_props={shared_props} />;

그렇기에 React는 이런 속성 전달의 번거로움을 덜고자 Context 메커니즘을 구현했다!

---

그럼 어떻게 써? 🤭

• 들어가기 앞서 createContext API 로 생성된 객체는
• → Provider , Consumer 를 가지게 된다

그러나 우리는 함수형에서 사용할 것이기 때문에 Consumer는 신경쓰지 않아도 된다!😃
그러면 Consumer를 어떻게 대체하냐 → Custom Hook을 이용해서 이를 해결

---

1. Context를 만들 때 필수조건 🥇

• Context를 만들기 위해서는 아래와 같이

1. ContextType : 공유하려는 데이터 속성
2. defaultContextValue : 공유하려는 데이터 속성의 초기값
3. SomeContext : 만드려는 Context

• 위의 3개를 무조건 작성을 해야 한다.

type ContextType = {
	// 공유하려는 데이터 속성
};
const defaultContextValue: ContextType = {
	// 공유하려는 데이터 속성 초기값
};
const SomeContext = createContext<ContextType>(defaultContextValue);

---

2. children 감싸기 🥈

• 아래의 코드는 위에서 만들었던 필수조건을 이용해서 ToggleThemeProvider 라는 Context를 만들었다.

여기서 알아보는 Provider의 특징
1. Provider 컴포넌트는 다음처럼 value와 children 속성이 존재하는
→ ProviderProps 속성을 제공
2. 사용하려는 타입 변수 : T → 위에서 설정한 createContext<T> 와 같아야함

	interface ProviderProps<T> {
	value: T;
	children?: ReactNode;
	}
	```

• 여기서 FC를 사용한 이유는 children을 기본적으로 내장하기 때문에 children에 대한 명시가 필요 없다는 장점이 있다.

import React, { createContext, FC } from 'react';

export type ToggleThemeContextType = {}; // 공유하려는 데이터 속성
const defaultToggleThemeContext = {}; // 공유하려는 데이터 초기 값

const ToggleThemeContext = createContext<ToggleThemeContextType>(
	defaultToggleThemeContext
);

type ToggleThemeContextProps = {}; // -1-
export const ToggleThemeProvider: FC<ToggleThemeContextProps> = ({
	children,
}) => {
	const value = {};
	return (
		// -2-
		<ToggleThemeContext.Provider value={value}>	
			{children}
		</ToggleThemeContext.Provider>
	       // -2-
	);
};

1. ToggleThemeContextProps 에 대해서 빈 객체로 설정
2. ProviderProps 에 설정된 children, value에 대한 명시

useContext Hook : 만든 context

• react 에서 자체적으로 제공하는 패키지
  ┠ context 객체가 제공하는 Provider 컴포넌트의
  ┗ value 속성값을 얻을 목적으로 사용!!!

export const useToggleTheme = () => {
  const value = useContext(ToggleThemeContext)
  return value;
}

위 코드와 같은 방향으로 사용하게 된다.

props를 넘겨 받아서 사용하고 싶다면?

• context를 만들었는데 props를 넘겨주어서 사용하고 싶은 경우
  ┗ ex : 함수 만들어서 내보내기

1. Provider 컴포넌트에 원하는 속성 추가
2. 설정한 속성을 Provider의 value 속성에 추가하기

type ToggleThemeContextPropps = {
  toggleTheme: () => void;
}
export const ToggleThemeProvider: FC<ToggleThemeContextProps> = ({
  const vluae = { 
  toggleTheme 
}
return <ToggleThemeContext.Provider value={value}/>
})
                                                                 

• 근데 value 속성의 타입은 제네릭 함수 createContext<T>(defaultValue)
  속성과 같아야 하는 점을 잊으면 안된다!!!
  

1. ContextType에 원하는 속성을 추가하고
2. default 값에 속성을 추가 시킨다.

export type ToggleThemeContextType = {
  toggleTheme: () => void
}

const defaultToggleThemeContext = {
  toggleTheme: () => {}
}

---

참고 서적

[리액트 네이티브 앱프로그래밍]-(전예홍)

---