[React/TS] Context 찍먹(수정중...)

ww8007·2021년 8월 13일
0

React Hook

목록 보기
2/2
post-thumbnail

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 컴포넌트**는 다음처럼 valuechildren 속성이 존재하는
    ProviderProps 속성을 제공
  2. 사용하려는 타입 변수 : T → 위에서 설정한 createContext<T> 와 같아야함
	interface ProviderProps<T> {
	value: T;
	children?: ReactNode;
	}
	```
	
- 여기서 FC를 사용한 이유는 children을 기본적으로 내장하기 때문에 children에 대한 명시가 필요 없다는 장점이 있다.

```tsx
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: () => {}
}

참고 서적

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


profile
Frontend 개발자를 꿈꾸는 대학생 입니다.

0개의 댓글