[React] Context

ksj0314·2024년 2월 5일

React

목록 보기

10/27

Context

: 데이터를 props형태로 계승하는 것이 아니라 전역적으로 관리하는 방법

When?

: 여러 Component에서 접근해야 하는 데이터를 관리할때 주로 사용합니다.

로그인 여부, 정보 등
UI 테마
현재 언어, 지역정보 등

React.createContext()

: context를 생성하기 위해 사용합니다.

// JSX
const UserContext = React.createContext(기본값);

Provider

: Provider로 감싸진 하위 components는 context에 접근이 가능해집니다.

// JSX
const UserContext = React.createContext({
  	name: 'Guest',
});

function App() {
  	const [user, setUser] = useState({name: 'John'});	

	<UserContext.Provider value={user}>
    	<Layout />
    </UserContext.Provider>
}

위 코드는 user의 기본값을 {name: 'John'}으로 변경해서 전달합니다. user state의 값을 로그인 성공시에 할당하도록 설정하면 {name: 'Guest'}을 기본값으로 사용하고 후에 변경하도록 설정할 수 있습니다.

※ 주의사항

// JSX
function App() {
	<UserContext.Provider value={{name: 'John'}}>
    	<Layout />
    </UserContext.Provider>
}

value를 위와 같이 작성하게되면 Provider가 재렌더링 될 때 마다 value 객체가 재 생성되어 context를 사용하는 하위 컴포넌트가 모두 재렌더링 됩니다.

=> value값을 state로 관리하여 불필요한 재렌더링을 방지합니다.

1) 여러 Context의 사용

// JSX
const ThemeContext = React.createContext('light');
const UserContext = React.createContext({
  	name: 'Guest',
});

function App() {
  	const [user, setUser] = useState({name: 'John'});
  	const [theme, setTheme] = useState();	

  	<ThemeContext.Provider value={theme} >
        <UserContext.Provider value={user}>
            <Layout />
        </UserContext.Provider>
    </ThemeContext.Provider>
}

Context를 중첩하여 사용합니다.

Consumer

: context를 사용하기 위해 사용합니다.

// JSX
<UserContext.Consumer>
  	{value => (
    	// 렌더링할 component
    )}
</UserContext.Consumer>

children으로 함수 사용합니다.
Provider에서 작성한 value값을 받아 value를 사용합니다.

예시 )

// JSX
function Content() {
  	return (
        <ThemeContext.Consumer>
            {theme => (
                <UserContext.Consumer>
                    {user => (
                        <Profile user={user} theme={theme}>
                    )}
                </UserContext.Consumer>
            )}
        </ThemeContext.Consumer>
    );
}

useContext()

: context.Consumer의 역할을 간편하게 사용하기 위해 사용됩니다.

// JSX
function Profile() {
	const theme = useContext(ThemeContext);
  	const user = useContext(UserContext); 

  	return (
        ~~
    );
}

Context의 value값을 반환합니다.
useContext의 파라미터로 Context 객체를 넣어 사용합니다.

ThemeProvider

styled-components에서만 props의 사용이 필요한경우 ThemeProvider라는 객체의 사용이 편리할 수 있습니다.

import { ThemeProvider } from "styled-components";

function App() { 
  const theme = {
    ~~~
  }
 
  return (
    <ThemeProvider theme={theme}>
      <Wrap />
    </ThemeProvider>
  );
}

위와 같이 context와 비슷하게 사용하며 context와 다른점은

사용하려는 컴포넌트에 해당 값을 받는 구문이 없어도 styled에서 사용할 수있다.
styled에서만 사용이 가능하다. (컴포넌트에서 사용이 불가능)

const Main = styled.div`
  color: ${props => props.theme.color};
`;

function Component(props) {
  return(
    <>
      <Main
        // color={props.theme.color} -> 사용 불가
      />
      ~~~
	</>
  );
}