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

Context

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

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

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

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

 

 

Context 정의

Context – React

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

 

핵심은 최상단에 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로 참조한다.

 

 

 

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