[React] Context

context vs intl

React Context와 Intl은 모두 React에서 다국어 지원을 위한 기능이나 목적이 다르다.

React Context는 React에서 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하기 위한 기능입니다. 일반적으로 상위 컴포넌트에서 상태를 관리하고, 하위 컴포넌트에서 해당 상태를 사용하게 됩니다. React Context는 이러한 데이터 전달을 간편하게 하기 위한 기능으로, 컴포넌트 계층 구조에서 여러 컴포넌트에 걸쳐 공유해야하는 데이터를 관리할 때 유용합니다. React Context를 사용하여, 언어 설정, 테마 설정 등과 같은 애플리케이션 전역에서 사용되는 데이터를 쉽게 관리할 수 있습니다.

Intl은 다국어 지원을 위한 기능입니다. Intl API는 표준 자바스크립트 API로, 다국어 지원을 위한 날짜 형식, 통화, 숫자 등의 기능을 제공합니다. React Intl은 React에서 Intl API를 쉽게 사용할 수 있도록 도와주는 라이브러리입니다. React Intl은 컴포넌트에서 사용되는 문자열을 다국어로 변환하고, 숫자, 날짜 등의 형식을 지정된 로케일에 따라 출력할 수 있습니다. 또한, React Intl은 언어를 동적으로 변경하는 것도 지원합니다.

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.

context 사용방법

• 전역에서 메시지 사용하기

1. messages.js 파일에 메시지를 객체 형태로 보관
2. Context 생성: createContext() 함수를 사용하여 새로운 컨텍스트 객체 생성

const MessageContext = React.createContext(messages.en);

export default MessageContext;

3. Provider 구성: Provider는 하위 컴포넌트에 메시지를 전달하는 역할, MessageProvider 컴포넌트를 만들어서 컨텍스트를 제공한다.

import React from 'react';
import MessageContext from './MessageContext';

function MessageProvider({ children, locale }) {
  const messages = React.useMemo(() => {
    return messages[locale];
  }, [locale]);

  return (
    <MessageContext.Provider value={messages}>
      {children}
    </MessageContext.Provider>
  );
}

export default MessageProvider;

4. 이제 모든 컴포넌트에서 MessageContext를 사용하여 메시지 값을 불러와 사용할 수 있다.

• Consumer 사용: 메시지를 사용하려는 컴포넌트에서 Consumer를 사용하여 메시지를 가져온다. Consumer는 Provider로부터 메시지를 받아와 하위 컴포넌트에 전달한다.

import React from 'react';
import MessageContext from './MessageContext';

function Greeting() {
  const messages = React.useContext(MessageContext);

  return <div>{messages.greeting}</div>;
}

export default Greeting;

5. MessageProvider 상위 컴포넌트에서 locale, children props 정의

• locale 프롭스는 애플리케이션에서 사용하고자 하는 지역화 언어 코드를 의미합니다. 예를 들어, 영어를 사용하고자 한다면 locale 프롭스에는 "en"과 같은 영어 코드를 전달해야 합니다.
• children 프롭스는 MessageProvider 컴포넌트의 자식 컴포넌트를 의미합니다. children은 일반적으로 JSX에서 해당 컴포넌트를 열고 닫는 태그 사이에 위치한 컴포넌트입니다.

function App() {
  const locale = "en"; // 영어로 설정

  return (
    <MessageProvider locale={locale}>
      <Header />
      <Main />
      <Footer />   // children props
    </MessageProvider>
  );
}

useMemo Hook

최적화를 위한 Hook, 계산 비용이 많이 드는 함수의 결과값을 캐싱해 놓아서 같은 인자로 재사용하게 함으로써 렌더링 성능을 최적화할 수 있다.

사용

useMemo(callback, deps) 형태
callback: 메모리제이션 하려는 함수
deps: 의존성 배열(dependency array)

• deps 배열에 지정한 값이 변경되었을 때만 callback 함수가 다시 실행되고 그렇지 않으면 이전 결과값을 반환