[ React ] Context API이란 ? ⑥

📝 Context API 이란 ? 

Context API는 React 컴포넌트 트리 전체에서 데이터를 공유할 수 있는 방법을 제공합니다.
이를 통해 중첩된 구조에서 데이터를 전달하는 데 있어서 불필요한 props drilling을 방지 할 수 있습니다.

부모 자식1 자식2 자식3 자식4 자식5가 있다면 자식5만 값을 가지고 싶은데, 
자식1 ~ 자식5까지 모두 받아야하기 때문에 매우 불필요하기때문에 context api를 이용하자

 

🤔 Context API 사용하기 

1. contexts폴더에 새로운 js 만들기
2. createContext 함수사용해서 객체 만들기 
3. 이후 Context.Provider 컴포넌트를 이용해서 데이터 전달 
4. 데이터는 Provider는 value prop을 이용

이 개념을 가지고 오늘 만들어 볼 화면은 아래와 같다.

개인정보출력 ➡ 작성한 내용이 출력 ➡ 숨기기 ➡ 개인정보출력으로 화면 전환이 되는 화면을 만들 것 이다.

---

 

📚 VS code

📘 userContext.js

📘 R06_context_api.js

1. import 하기 

import React,{useState,useContext} from "react";
import UserContext from "../contexts/userContext";

2. return 확인하기 

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;

① import한 UserContext.Provider  value를 이용해서 데이터를 가져오면되는데, 

    UserContext가 감싸고 있는 자식컴포넌트에게 Context API를 이용해서 user을 제공한다라는 뜻이다. 

value에 user , temp을 넣어준다.  

또한 button에 onClick이라는 함수를 넣어줘서 개인정보출력을 했을때 새로운 함수를 만들어 출력하게 만든다. 

개인정보숨기기를 했을때는 값 자체를  null만들어서 보이지 않게 해준다.

  const [user,setUser] = useState(null);
  null값을 이용해서 컴포넌트가 처음 렌더링될 때 사용자 정보가 없음을 나타낸다
  
   const temp = '임시 변수';

    const {user,temp} = useContext(UserContext)
    //useContext() : Context를 사용하겠다!
    //useContext(Context명) : 지정된 Context를 사용
    //-> 부모컴포넌트에서 제공한 값을 꺼내쓸 수 있다.
    
    UserContext에서 value값으로 넘겨준 temp, user이 들어가 있다.

 

 

 

📄 전체코드

import React,{useState,useContext} from "react";
import UserContext from "../contexts/userContext";

const User = () => {

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

    //console.log(temp)
    //console.log(user)

    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;