[React/Hooks] useContext에 대하여

 

useContext

---

• context이용시, 트리 단게마다 명시적으로 props를 넘겨주지 않고도 컴포넌트가 값을 공유할 수 있다
• useContext는 Context.Provider과 같이 사용된다

context를 써야하는 경우

---

• 예를 들어, 로그인한 유저, 테마, 선호하는 언어 등의 전역적 데이터를 공유할 때 (아래는 테마를 통한 예시)
  • 기존 방식: 테마 인수를 명시적으로 넘겨주기
    • 정보를 일일이 넘겨주고 있음
      • App > Toolbar > ThemedButton

  • class App extends React.Component {
    	render() {
    		return <Toolbar theme = "dark" />;
    	}
    }
    
    function Toolbar(props) {
    	return (
    		<div>
    			<ThemeButton theme={props.theme} />
    		</div>
    	);
    }
    
    class ThemeButton extends React.Component (
    	return() {
    		return <Button theme={this.props.theme} />;
    	}
    }

  • context를 이용한 방식
    • (1) : light를 기본값으로 하는 ThemeContext를 만들었음
    • (2): Provider를 이용하여 dark값을 선택값으로 보냄
    • (3): 중간에 걸쳐있는 Toolbar 컴포넌트는 속성을 넘겨줄 필요없이 호출만 담당함
    • (4): (1)에서 설정한 ThemeContext를 이용할 것이라고 정해줌
    • (5): 여기서 사용하는 context는 (2)에서 선택된 dark 테마를 가지게 됨(최종)

  • //light를 기본값으로 하는 테마 theme context를 만듦
    const ThemeContext = React.createContext('light'); // (1)
    
    class App extends React.Component {
    	render() {
    		return (
    			<ThemeContext.Provider value="dark"> {/* (2) */}
    				<Toolbar />
    			</ThemeContext.Provider>
    		);
    	}
    }
    
    function Toolbar() {
    	return (
    		<div>
    			<ThemedButton /> {/*/ (3) */}
    		</div>
    	);
    }
    
    class ThemeButton extends React.Component {
    	static contextType = ThemeContext; // (4)
    	return() {
    		return <Button theme={this.context} />; // (5)
    	}
    }
    

context사용에서 고려해야하는 것

---

• context를 사용하면 컴포넌트를 재사용하기가 어려워진다
  • 꼭 필요할 때만 사용해야한다
• context보다 컴포넌트 합성이 더 간단한 해결책인 경우도 있다