Context APi에 대해 알아보자❗

Context API란❓

Props driling은 React 컴포넌트 구조에서 자식 컴포넌트로 데이터를 전달하기 위해 부모 컴포넌트를 거치는 것을 의미 이는 컴포넌트의 구조가 깊어지면서 코드가 복잡해지고 유지보수가 어려워지는 문제를 유발한다.

Context API는 props driling 방지 문제점을 해결하기 위한 방법이다

Props driling

ConText를 사용하기 위해서는❓

createContext()함수를 사용하여 Context객체를 생성해야한다.
객체 생성 후 Context.Provider 컴포넌트를 이용해 자식컴포넌트에게 데이터를 전달할 수 있다.

Provider

value prop을 통해 데이터를 전달한다.

아래 예제를 보고 Context API를 알아보자

UserContext.js

import React, { createContext } from 'react';

// createContext(초기값): Constext 객체생성
const UserContext = createContext();

export default UserContext;

R06_context_api.js

import React, { useState , useContext } from 'react';
import UserContext from '../contexts/UserConext';

const User = () =>{

    //useContext(Context명) : 지정된 Context를 사용
    // -> 부모 컴포넌트에서 제공한 값을 꺼내 쓸 수 있다
    const {user, temp} = useContext(UserContext); //user, temp
    // UserContext에서 user를 꺼내서 user변수에 저장
    // UserContext에서 temp를 꺼내서 temp변수에 저장

    console.log(user);
    console.log(temp);

    return(
        <ul>
            <li>{user.name}</li>
            <li>{user.email}</li>
        </ul>
    )
}

const Profile =() => {

    const [user, setUser] = useState(null);

    const print = () => {

        setUser({name: '김미영', email: 'my-kim@kh.or.kr'})
    }

    

const temp = '임시변수';

    return(

        /*  UserContext가 감싸고 있는 자식 컴포넌트에게  
            Context API를 이용해서 user 제공
        */ 
        
        <UserContext.Provider value={ {user , temp} }>
            <div>
                {/* 삼항연산자를 이용한 컴포넌트 렌더링 제어(조건부 렌더링) */}
                { user != null? (
                    <>
                        <User/>
                        <button onClick={ ()=>{ setUser(null) }}> 개인 정보 숨기기</button>
                    </>
                ) : (
                    <button onClick={print}> 개인 정보 출력</button>
                )}

            </div>
        </UserContext.Provider>

    );
}

export default Profile;

💗화면

첫 화면

개인정보 출력 버튼을 누르면?

onClick print()가 수행되고 김미영 팀장의 정보가 나타난다.

개인정보 숨기기 버튼을 누루면?

onClick 에서 익명함수가 실행되고 setUser를 통해 user는 null이 되어 초기화면으로 돌아간다.