[React] 전통적인 Context 이해하기.

2021. 1. 21. 11:38·React/React Basic

Context

리액트의 기본 흐름은 트리 구조이다.

컴포넌트 내에서 자식 컴포넌트를 호출하고, 자식 컴포넌트는 그 하위 컴포넌트를 호출하게 된다.

최상단 컴포넌트에서 최하위 컴포넌트로 props를 전달하고자 할 때, 중간의 모든 컴포넌트에서 이를 주고 받는 코드들이

포함되어야 한다. 이를 해결하기 위해 존재하는 것이 context이다.

 

 

Context 정의

 

Context – React

A JavaScript library for building user interfaces

ko.reactjs.org

리액트 공식문서에 너무 잘 정리되어있어 이를 보며 이해하는 것이 수월할 것이다.

 

핵심은 최상단에 context를 선언하는 것.

//'light'는 기본 값
const ThemeContext = React.createContext('light');

 

그리고, 이를 사용하는 최상단 컴포넌트를 provider로 감싸주는 것.

<ThemeContext.Provider value="dark">
        <ChildComponent />
      </ThemeContext.Provider>

 

 

context 구독

전통적인 context 구독 방법에는 크게 두 가지가 있다.

static 사용

class MyTheme extends React.Component {
//contextType이 컴포넌트의 고유 context 속성 값임
  static contextType = ThemeProvider;
  render(){
  //클래스의 context를 곧바로 변수처럼 사용
    return <div>{this.context}</div>
  }
}

static contextType을 사용해서 클래스 내의 모든 부분에서 context의 사용이 가능하도록 하는 방법이다.

this.context 형태로 context를 참조한다.

하나의 context만 사용할 수 있다.

 

Consumer

class MyCounter extends React.Component {
  render(){
    return <ThemeProvider.Consumer>
      {
        value => (
          <div>{value}</div>
        )
      }
    </ThemeProvider.Consumer>
  }
}

context내에는 provider와 consumer가 내장되어 있다.

consumer로 감싼 후 해당 context 데이터 명을 선언하고, arrow로 컴포넌트를 return 해주면 컴포넌트에서 context를 사용 할 수 있다. 앞선 방법과는 다르게 Consumer를 트리 형태로 선언하면 여러개의 context를 참조 할 수 있다.

 

 

객체를 provider로 지정하기

dart의 변수타입인 map이 JS에서는 객체(object)라고 한다.

객체를 context로 넘겨보자.

const ThemeProvider = createContext({light : 'dark', isMute : true});

const App = 
() => {
  return (
    <ThemeProvider.Provider value = {{light : 'white',isMute : false}}>
      <MyCounter />
    </ThemeProvider.Provider>
  )
}


class MyCounter extends React.Component {
  render(){
    return <ThemeProvider.Consumer>
      {
        //혹은 themeContext로 선언 후
        //themeContext.light, isMute로 참조 가능
        ({light, isMute}) => (
          <div> 
          {light} 
          <p></p>
          {isMute ? 'true' : 'false'}
          </div>
        )
      }
    </ThemeProvider.Consumer>
  }
}

 

dart에 익숙해져있던 탓에 이렇게 간단한걸 상당히 애먹었다.

리액트의 HTML을 사용하는 부분에서 JS를 사용하려면 {}로 감싸주어야한다.

object의 기본 형태가 {key : value, key2 :value2}의 형태인데, return 내부에서 선언하기 위해

{}로 한번 더 감싸주었다. 또한, dart에서 변수명[key]로 참조하는 것과는 다르게 클래스처럼 변수명.key로 참조한다.

 

 

 

다음 포스팅에선 훅을 사용해 더 편리하게 사용하는 방법을 알아본다.

저작자표시 비영리 변경금지 (새창열림)

'React > React Basic' 카테고리의 다른 글

[React] 컴포넌트간 props 전달  (2) 2021.07.25
[React] 이벤트에서 함수 호출하기  (1) 2021.03.15
[React] JSX 기본 익히기  (0) 2021.03.11
[React] Hook과 상태관리(useState)  (0) 2021.01.21
[React] React JS 시작하기  (0) 2020.12.29
'React/React Basic' 카테고리의 다른 글
  • [React] 이벤트에서 함수 호출하기
  • [React] JSX 기본 익히기
  • [React] Hook과 상태관리(useState)
  • [React] React JS 시작하기
박유상의 개발블로그
박유상의 개발블로그
개발블로그
  • 박유상의 개발블로그
    박유상의 개발블로그
    박유상의 개발블로그
  • 전체
    오늘
    어제
    • 전체 (134)
      • Who am I (10)
        • Portfolio (4)
        • Reminiscence (5)
        • Oversea (1)
        • SiliconValley (0)
      • React (36)
        • React Basic (15)
        • React Tech (5)
        • JavaScript (7)
        • TypeScript (3)
        • CSS&HTML (3)
        • Firebase (3)
      • NodeJS (1)
        • NodeJS Basic (1)
      • Flutter (55)
        • Flutter Widget Design (5)
        • Flutter Widget Basic (8)
        • Flutter Tech (18)
        • Flutter Issue (7)
        • Flutter Web (6)
        • About Flutter (2)
        • Firebase (1)
        • Dev Env (1)
        • Dart (7)
      • Programming (31)
        • Web (1)
        • General (0)
        • Algorithm (25)
        • Python (1)
        • VS Code (2)
      • Django (0)
  • 블로그 메뉴

    • Who I AM
    • React
    • NodeJS
    • Flutter
    • Programming
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    useRef
    링고리
    프로그래머스
    탐욕법
    DART
    JSON
    DP
    Redux
    플러터
    리액트
    flutter web
    github
    react
    useTranslation
    파이썬
    useState
    HTML
    포트폴리오
    플러터 웹
    Firebase
    Lingory
    map
    CSS
    Flutter
    TypeScript
    자바스크립트
    웹
    Python
    JavaScript
    알고리즘
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
박유상의 개발블로그
[React] 전통적인 Context 이해하기.
상단으로

티스토리툴바