Develop/React.js

[React] props 대신 Context API 쓰기

dawonny 2022. 8. 19. 03:00
728x90
반응형

props 대신할 수 있는 것은?

 

props 싫으면 쓸 수 있는게

Context API(리액트 기본문법)

과

Redux(외부 라이브러리) 

가 있다.

 

Context API는 실무에서는 잘 쓰는 편은 아니라고 함.

참고로 알아가자.

 

언제 쓰는가?

 

부모 컴포넌트에 있는 state 를 

자식 컴포넌트에서 쓰고 싶으면 props 를 썼었다

 

근데 자식의 자식의 자식의.... 자식의 컴포넌트에게 props를 전송하고 싶다면

작성하기 힘들 것이다.

그런 의미로 쓰는 게 Context API 이다.

 

 

먼저 부모 컴포넌트에 다음과 같이 작성한다.

export let Context1 = React.createContext();

function App(){
  let [재고, 재고변경] = useState([10,11,12]);

  (생략)
}

context 를 하나 만들어준다.

state 보관함이라고 생각하면 된다.

export let 재고context = React.createContext();

function App(){
  let [재고, 재고변경] = useState([10,11,12]);

  return (
    <Context1.Provider value={ {재고, shoes} }>
      <Detail shoes={shoes}/>
    </Context1.Provider>
    
  )
}

그리고 자식 컴포넌트를 context로 감싼다.

그리고 value에다가 전송하고 싶은 state를 다 적는다.

이러면 자식컴포넌트에서는 value에 적었던 state 를 다 사용할 수 있게 된다.

 

다음은 자식 컴포넌트에서 사용하는 모습이다.

import {useState, useEffect, useContext} from 'react';
import {Context1} from './../App.js';

function Detail(){
  let {재고} = useContext(Context1)

  return (
    <div>{재고}</div>
  )
}

먼저 context를 import해주고

useContext에다가 context를 담아준다.

useContext는 Context를 사용할 수 있도록 해체해주는 함수라고 생각하면된다.

 

저 위에 코드에서는 재고라는 변수에 context가 해체되어 들어가 있을 것이다.

이제 state 를 사용하고 싶으면 변수안에 들어가 있으니 변수를 가져다 쓰면 된다.

 

왜 쓸까?

 

쭉 보면 오히려 props보다 불편해 보인다.

하지만 중복 되는 컴포넌트가 많으면 이게 좀 더 나을지도 모르겠다.

그리고 아무래도 복잡한 props drilling 을 방지하고, 컴포넌트 간의 데이터 전달을 간소화할 수 있다는 점에서 의미가 있어보인다.

 

하지만 단점이 있다면

1. state 변경시 다른 컴포넌트들 까지도 재랜더링이 되어서 효율이 떨어질 수 있고

2. 자식 컴포넌트에 useContext() 이런걸 쓰면 나중에 다른 파일에서 이 컴포넌트 재사용할때 좀 애매할 수 있다

   (context를 import 해와야하니까)

 

 

보통은 redux라는 외부 라이브러리를 많이 쓴다고 한다.

728x90
반응형