컨텍스트

 

 

컨텍스트 (Context) 가 뭐야? 😃

 

- 리액트 컴포넌트들 사이에서 데이터를 기존의 props 를 통해 전달하는 방식 대신,

컴포넌트 트리 (component tree) 를 통해 곧바로 컴포넌트에 전달하는 새로운 방식을 제공함.

이를 통해 어떤 컴포넌트든지 데이터에 쉽게 접근할 수 있지용.

 

1) 컨텍스트는 언제 사용해야 하나?

 

- 기존 props 를 통해 데이터를 전달하는 기존 방식은 실제 데이터를 필요로 하는 컴포넌트까지의 깊이가 길어질수록 복잡해짐.

반복적인 코드를 계속해서 작성해야 하기때문에 비효율적이고, 직관적이지도 않음! 

이럴 때 컨텍스를 사용하면 깰끔하게 개선할 수 있음. 💪🏻

 

 

1.

컨텍스트는 데이터를 매번 컴포넌트를 통해 전달할 필요 없이 컴포넌트 트리로 곧바로 전달하게 해 줌.

아래 코드는 React.createContext() 함수를 사용해서 ThemeContext 라는 이름의 컨텍스트를 하나 생성했음.

현재 테마를 위한 컨텍스트가 생성됐고, 기본값은 'red' 임.

 

const ThemeContext = React.createContext('red');

 

2.

Provider 를 사용하여 하위 컴포넌트들에게 현재 테마 데이터를 전달해야 함.

모든 하위 컴포넌트들은 컴포넌트 트리 하단에 얼마나 깊이 있는지에 관계없이 데이터를 읽을 수 있음.

컨텍스트를 사용할 컴포넌트의 상위 컴포넌트에서 Provider 로 감싸 줘야 하는데,

아래 코드에서는 최상위 컴포넌트인 App 컴포넌트를 ThemeContext.Provider 로 감싸 줬음.

이렇게 하면 Provider의 모든 하위 컴포넌트가 얼마나 깊이 위치해 있는지 관계없이 컨텍스트의 데이터를 읽을 수 있음.

아래 코드는 현재 테마 값으로 'pink' 를 전달하고 있음.

 

function App (props) {
    return (
        <ThemeContext.Provider value="pink">
            <Toolbar />
        </ThemeContext.Provider>
    );
}

 

3.

이제 중간에 위치한 컴포넌트는 테마 데이터를 하위 컴포넌트로 전달할 필요가 없음.

 

function Toolbar (props) {
    return (
        <div>
            <ThemedButton />
        </div>
    )
}

 

4.

리액트는 가장 가까운 상위 테마 Provider 를 찾아서 해당되는 값을 사용한다.

만약 해당되는 Provider 가 없을 경우에는 기본값 'red' 를 사용한다.

아래 코드에서는 상위 Provider 가 존재하기 때문에 현재 테마의 값은 'pink' 가 되는 것임.

 

function ThemedButton (props) {
    return (
        <ThemedContext.Consumer>
            {value => <Button theme={value} />}
        </ThemedContext.Consumer>
    );
}

 

2) 컨텍스트를 사용하기 전에 고려할 점은?

 

- 컨텍스트는 다른 레벨의 많은 컴포넌트가 특정 데이터를 필요로 하는 경우에 주로 사용함.

하지만, 무조건 컨텍스트를 사용하는 것은 좋은 것이 아님~ 왜냐! 컴포넌트와 컨텍스트가 연동되면 재사용성이 떨어지기 때문임.

다른 레벨의 여러 컴포넌트가 데이터를 필요로 하는 게 아니면, 기존 사용 방식대로 props 를 통해 데이터를 전달하는 컴포넌트 합성 방법이 더 적합할 때도 있음.

 

//Page 컴포넌트는 PageLayout 컴포넌트를 렌더링함.
<Page user={user} avatarSize={avatarSize} />

//PageLayout 컴포넌트는 NavigationBar 컴포넌트를 렌더링
<PageLayout user={user} avatarSize={avatarSize} />

//NavigationBar 컴포넌트는 Link 컴포넌트를 렌더링
<NavigationBar user={user} avatarSize={avatarSize} />

//Link 컴포넌트는 Avatar 컴포넌트를 렌더링
<Link href={user.permalink}>
	<Avatar user={user} size={avatarSize} />
</Link>

 

위의 코드에서는 사용자 정보와, 아바타 사이즈를 몇 단계에 걸쳐 하위 컴포넌트인 Link 컴포넌트와 Avatar 로 전달하는

Page 컴포넌트가 있음.

가장 하위 레벨인 Avatar 컴포넌트가 user 와 avatarSize 를 필요로 하기 때문에, <<<  이를 위해 여러 단계에 걸쳐서 props 를 통해 user 와 avatarSize 를 전달해 주고 있는 것인데.... 이 과정은 굉장히 불필요하게 느껴짐.

또한 Avatar 컴포넌트에 추가적인 데이터가 필요해지면 해당 데이터도 추가로 여러 단계에 걸쳐 넘겨 줘야 하기 때문에 굉장히 번거로움.

이때, 컨텍스트를 사용하지 않고 문제를 해결할 수 있는 한 가지 방법은 Avatar 컴포넌트를 변수에 저장하여 직접 넘겨 주는 것임.

 

function Page (props) {
    const user = props.user;

    const userLink = (
        <Link href={user.permalink}>
            <Avatar user={user} size={props.avatarSize} />
        </Link>
    );

    //Page 컴포넌트는 PageLayout 컴포넌트를 렌더링
    //이때 props 로 userLink 를 함께 전달함.

    return <PageLayout userLink={userLink} />;
}

//PageLayout 컴포넌트는 NavigationBar 컴포넌트를 렌더링
<PageLayout userLink={...} />

//NavigationBar 컴포넌트는 props 로 전달받은 userLink element 를 리턴
<NavigationBar userLink={...} />

 

위 코드에서는 user 와 avatarSize 가 props 로 들어간 Avatar 컴포넌트를 userLink 라는 변수에 저장한 뒤에 해당 변수를 하위 컴포넌트로 넘기고 있음.

가장 상위 레벨에 있는 Page 컴포넌트만 Avatar 컴포넌트에서 필요로 하는 user 와 avatarSize 에 대해 알고 있으면 됨.

 

이런 방식은 중간 레벨의 컴포넌트를 통해 전달해야 하는 props 를 없애고, 코드를 간결히 만들어 줌.

또한 최상위 컴포넌트에는 많은 권한을 부여하게 됨.

 

다만, 모든 상황에 이 방식이 좋은 것은 아닙니다~

데이터가 많아질수록 상위 컴포넌트에 몰리기 때문에 상위 컴포넌트는 복잡해지고, 하위 컴포넌트는 너무 유연해집니다.

 

 

function Page (props) {
    const user = props.user;

    const topBar = (
        <NavigationBar>
            <Link href={user.permalink}>
                <Avatar user={user} size={props.avatarSize} />
            </Link>
        </NavigationBar>
    );

    const content = <Feed user={user} />

    return (
        <PageLayout
            topBar={topBar}
            content={content}
        />
    );
}

 

위 코드의 방식은 하위 컴포넌트의 의존성을 상위 컴포넌트와 분리할 필요가 있는 대부분의 경우에 적절한 방법임.

렌더링 전에 하위 컴포넌트가 상위 컴포넌트와 통신해야 하는 경우 render props 를 사용하여 처리할 수도 있음.

 

하지만 어떠한 경우에는 하나의 데이터에 다양한 레벨이 있는 중첩된 컴포넌트들의 접근이 필요할 수 있음.

이러한 경우에는 위 방식은 사용할 수 없고, 컨텍스트를 사용해야 함.

컨텍스트는 해당 데이터와 데이터의 변경사항을 모두 하위 컴포넌트들에게 broadcast(널리 알려 주는 것) 해 줌.

컨텍스트를 사용하기에 적합한 데이터의 대표적인 예로 현재 지역 정보, ui 테마, 그리고 캐싱된 데이터 등이 있음.

 

 

3) 컨텍스트 API

 

1. React.createContext

 

- 컨텍스트를 생성하기 위해서 React.createContext() 함수를 사용해야 함.

 

const MyContext = React.createContext(기본갑);

 

상위 레벨에 매칭되는 Provider 가 없다면, 이 경우에만 기본값이 사용됨.

기본값으로 undefined 를 넣으면 기본값이 사용되지 않음.

 

 

2. Context.Provider

 

- Context.Provider 컴포넌트로 하위 컴포넌트들을 감싸주면 모든 하위 컴포넌트들이 해당 컨텍스트의 데이터에 접근할 수 있게 됨.

 

<MyContext.Provider value={/* some value */}>

 

Provider 컴포넌트에는 value 라는 prop 이 있으며, 이것은 Provider 컴포넌트 하위에 있는 컴포넌트들에게 전달됨.

하위 컴포넌트들이 이 값을 사용하게 되는데, 이것을 consumer 컴포넌트 라고 부름.

consumer 컴포넌트는 컨텍스트 값이 변경되면 재렌더링 됨!

참고로, 하나의 Provider 컴포넌트는 여러 개의 consumer 컴포넌트와 연결될 수 있으며 여러 개의 Provider 컴포넌트는 중첩되어 사용할 수 있음.

 

Provider 컴포넌트로 감싸진 모든 consumer 컴포넌트는 Provider 의 value prop 이 바뀔 때마다 재렌더링 됨.

 

값이 변경되었을 때 상위 컴포넌트가 업데이트 대상이 아니더라도, 하위에 있는 컴포넌트가 컨텍스트를 사용한다면 하위 컴포넌트에서는 업데이트가 일어남.

 

 

3. Context.Consumer

 

consumer 컴포넌트는 컨텍스트의 데이터를 구독하는 컴포넌트임.

 

<MyContext.Consumer>
    {value => /* 컨텍스트의 값에 따라서 컴포넌트들을 렌더링 */ }
</MyContext.Consumer>

 

컴포넌트의 자식으로 함수가 오는 것을 function as a child 라고 함.

Context.Consumer 로 감싸주면 자식으로 들어간 함수가 현재 컨텍스트의 value 를 받아서 리액트 노드로 리턴하게 됨.

함수로 전달되는 value 는 Provider 의 value prop 과 동일함.

만약 상위 컴포넌트에 Provider 가 없다면 이 value 파라미터는 createContext() 를 호출할 때 넣는 기본값과 동일한 역할을 함.

 

 

4. Context.displayName

 

컨텍스트 객체는 displayName 이라는 문자열 속성을 가짐.

또한, 크롬 리액트 개발자 도구에서는 컨텍스트의 Provider 나 Consumer 를 표시할 때,

이 displayName 을 함께 표시해 줌.

 

const MyContext = React.createContext(/* some value */);
MyContext.displayName = 'MyDisplayName';

//개발자 도구에 "MyDisplayName.Provider" 로 표시됨
<MyCOntext.Provider>

//개발자 도구에 "MyDisplayName.Consumer" 로 표시됨
<MyContext.Consumer>

 

위와 같이 코드를 작성하면 MyDisplayName 이 리액트 개발자 도구에 표시됨.

 

 

5. useContext

 

함수 컴포넌트에서 컨텍스트를 사용하기 위해 컴포넌트를 매번 Consumer 컴포넌트로 감싸주는 것보다 더 좋은 방법이 있음.

그것은 바로 useContext() 훅입니다.

훅은 함수 컴포넌트에서 컨텍스트를 쉽게 사용할 수 있게 해 줌.

useContext() 훅과 React.createContext() 함수 호출로 생성된 컨텍스트 객체를 인자로 받아서

현재 컨텍스트의 값을 리턴함.

 

function MyComponent(props) {
    const value = useContext(MyContext);

    return (
        ...
    );
}

 

useContext () 훅을 사용하면 다른 방식과 동일하게 컴포넌트 트리상에서 가장 가까운 상위 Provider 로부터 컨텍스트의 값을 받아오게 됨.

만약 컨텍스트의 값이 변경되면 변경된 값과 함께 useContext() 훅을 사용하는 컴포넌트가 재렌더링 됨.

그렇기에 useContext() 훅을 사용하는 컴포넌트의 렌더링이 꽤 무거운 작업일 경우에는 별도로 최적화 작업을 해 줄 필요가 있음.

 

useContext() 훅을 사용할 때에는 파라미터로 컨텍스트 객체를 넣어 줘야 한다는 것을 꼭 기억하자.

 

//올바른 사용
useContext(MyContext);

//잘못된 사용법
useContext(MyContext.Consumer);
useContext(MyContext.Provider);

 

위 코드처럼 Consumer나 Provider 를 넣으면 안 됨!!!