0817 리액트

정혜지·2022년 8월 17일

context

실제로 사용할 컴포넌트에 context를 사용하면 컴포넌트에 불필요한 prop을 가지고 있지 않아도 된다~! --> *프롭스 드릴링 방지

불필요한 프롭스 전달X -> 상태관리 용이~!
그러나 재사용성이 떨어진다.

ThemeContext.js

import React, { createContext } from "react";

export const ThemeContext = createContext(null);

속성을 사용할 컴포넌트

import React, { useContext } from "react";
import { ThemeContext } from "../../contexts/ThemeContext";

function Footer () {
  const { isDark, setIsDark } = useContext(ThemeContext);
  
return (
	<></>
); 
}

*prop drilling
하위 컴포넌트로 prop속성 계속해서 상속
---> 내가 원하지 않는 상황 발생의 여지가 존재

Context.Provider

<MyContext.Provider value={/* 어떤 값 */}>

Context 오브젝트에 포함된 React 컴포넌트인 Provider는 context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 합니다.

Provider 컴포넌트는 value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달합니다. 값을 전달받을 수 있는 컴포넌트의 수에 제한은 없습니다. Provider 하위에 또 다른 Provider를 배치하는 것도 가능하며, 이 경우 하위 Provider의 값이 우선시됩니다.

Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value prop가 바뀔 때마다 다시 렌더링 됩니다

context를 사용하기 전에 고려할 것
https://ko.reactjs.org/docs/context.html#before-you-use-context

여러 레벨에 걸쳐 props 넘기는 걸 대체하는 데에 context보다 컴포넌트 합성이 더 간단한 해결책일 수도 있다.

사용자정의 hook

커스텀 hook

context children이 유효범위

hook의 이름은 반드시 use로 시작

이게몰가,,

기존코드

<button onClick={handleDelete}>{locale === 'kor' ? '삭제' : 'Delete'}</button>
<button onClick={handleUpdate}>{locale === 'kor' ? '삭제' : 'Delete'}</button>

변경코드_

<button onClick={handleDelete}>{translator('delete btn')}</button>
<button onClick={handleUpdate}>{translator('edit btn')}</button>

translator

const dict = {
	kor: {
		'delete btn': '삭제',
		'edit btn': '수정'
    },
	eng: {
		'delete btn': 'Delete',
		'edit btn': 'Edit'
    }
}

const translator = (key) => {

    return dict[locale][key];
}

context,컴포넌트화, 커스텀 훅 ----> 찾아서 적용해보기