3.4장

3.4 콘텍스트 API로 데이터 전달하기

 

• 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하기 위해서 속성값이 사용된다.
• 상위 컴포넌트에서 내가 가고싶은 하위 컴포넌트까지 전달하는데 중간에 거치는 컴포넌트에서도 불필요하게 속성값이 들어가는 무의미한 경우가 발생한다.
• 이를 방지하기 위해 콘텍스트 API를 이용하여 중첩 구조가 복잡한 상황에서도 원하는 컴포넌트에 쉽게 데이터를 전달할 수 있다.

 

3.4.1 콘텍스트 API 이해하기

 

• 콘텍스트 API를 이용하면 중간에 다른 컴포넌트가 개입하지 않아도 속성값을 전달할 수 있다.

    const UserContext = React.createContext("");

    function App() {
        return (
            <div>
                <UserContext.Provider value="mike">
                    <div>상단 메뉴</div>
                    <Profile />
                    <div>하단 메뉴</div>
                </UserContext.Provider>
            </div>
        );
    }
    function Profile() {
        return (
            <div>
                <Greeting />
            </div>
        );
    }

    function Greeting() {
        return (
            <UserContext.Consumer>
                {username => <p>{`${username}님 안녕하세요`}</p>}
            </UserContext.Consumer>
        );
    }

 

• createContext를 호출하면 객체가 생성되고 구조는 다음과 같다.

  React.createContext(defaultValue) => {Provider, Consumer}

• 상위 컴포넌트에서는 Provider로 데이터를 전달하고 하위 컴포넌트에서는 Consumer로 데이터를 사용한다.
• Consumer 컴포넌트는 가장 가까운 Provider 컴포넌트를 찾고 최상위에 도달할 때까지 Provider 컴포넌트를 찾기 못하면 기본값이 사용된다.
• 상위 Provider 컴포넌트의 속성값이 변할 경우 하위 모든 Consumer 컴포넌트가 다시 렌더링 되며 중간 컴포넌트의 렌더링 여부와 상관없이 Consumer 컴포넌트가 다시 렌더링 된다.

 

3.4.2 콘텍스트 API 활용하기

 

• 중첩사용이 가능하다.

    <ThemeContext.Provider value="light">
        <UserContext.Provider value="mike">
        </UserContext.Provider>
    </ThemeContext.Provider>

    <ThemeContext.Consumer>
        {theme => (
            <UserContext.Consumer>
                {username => (

                )}
            </UserContext.Consumer>
        )}
    </ThemeContext.Consumer>

 

• 데이터 종류별로 콘텍스트를 만들어 사용하면 렌더링 성능상 이점이 있기 때문
• 상위 컴포넌트 값을 하위에서도 쓸수있다.

 

3.4.3 콘텍스트 API 사용 시 주의할 점

 

• 콘텍스트 데이터로 객체가 전달될 경우 불필요한 렌더링이 발생한다.
• Provider 를 찾지못할 경우 기본값이 사용된다.