중첩되는 컴포넌트가 많다? props대신 Context API를 사용해보자

지금까지 개발하면서 느끼셨겠지만 리액트는 Single Page Application임으로

개발 시 단점이 많이 보이게되는데 그 단점은 state간의 공유가 참으로 어렵다는 사실,

 

state를 갖다 쓸 수 있는 방법은

부모 컴포넌트  👉 자식 컴포넌트로 전달하기 위해서 props 전송을 해야한다는 것.

 

그래, props가 있다, props를 사용하면되겠지. 근데!

data라는 state를  DetailContent컴포넌트에서 사용하려할 때 중간의 Detail 컴포넌트를 건너 뛰어서 사용할 수 없다는 불편함이 있다. 

 

예를들어 컴포넌트가 20번 중첩이 된다면 props를 10번 이상 입력해야하는데, 

이것에 대해 방지할 수 있는 방법2가지가 있다.

 

첫 번째 방법은 리액트 기본 문법인 Context API 를 사용하는 것, 

두 번째 방법은 외부 라이브러리를 사용하는 Redux를 사용하는 것.

 

 

지금은 Context API를 사용하는 방법을 알아볼 것이다.

 

Context API는 props없이 state 공유가능하다. 

근데 성능이슈에 대한 문제와 컴포넌트 재활용이 어렵기 때문에 자주 사용하지는 않는다한다.

 

셋팅문법은 3개정도인데, 

우선 함수 바깥에다가

import {createContext, useState} from 'react';

export const Context1 = createContext(); 

-- 나머지 코드 생략 --

const Context1 = createContext() 이거는  state 의 보관함으로 Context하나 만들어준다는 것.

 

이렇게 보관함을 하나 만들어주고,

 

state공유를 원하는 것을 감싸준다. 

 {/* 페이지를 여러개 만들고 싶다면 : URL파라미터 써도 가능 */}
          
          <Route path="/detail/:id" element={
              <Context1.Provider value={{data1, data2}}>
                <Detail shoes={shoes} />  
                {/* <- 여기 안에 있는 모든 컴포넌트는 value값에 있는 거 사용가능 */}
              </Context1.Provider>
            } />

이제 갖다 쓰기위해서 

우선 import하기. 갖다 쓰기 위해

 

 

App.js

export const Context1 = createContext(); //state보관함임

 

Detail.js

import {Context1} from './../App.js'; //지금 경로에서 한폴더 위로간다음에 app.js를 찾을거임

 

오브젝트 형식으로  state들이 보관되어있다.

function Detail(props) {

	useContext(Context1) 
    //보관함 해체, 여기 자리에 {state1, state2} 오브젝트 형식으로 남는다.


	-- 나머지 코드 생략 --

 

자료를 쉽게 꺼내 쓸 수 있도록 

const {data, data2} = useContext(Context1)

 

functon Detail(props){
	const {data1, data2} = useContext(Context1)
    
    
    -- 중간 코드 생략 -- 
    
    <p>{data}</p>
    
}

 

또한 Detail뿐만 아니라 자식 컴포넌트들도 props 없이 사용이 가능해진다. 

 

 

근데 Context API 을 안쓰는 이유가 있다는데~ 그것은

1. state 변경 시 쓸데 없이는 것까지 무조건 재렌더링되므로 효율적인 부분에서 떨어진다.

 

2. 자식 컴포넌트가 컨텍스트 문법을 쓰고 있다면 나중에 다른 페이지에서 재사용할 시 이상해질 수 있다. 

변수가 없다는 경우 등등... 따라서 관리가 어려워지는 문제가 있기 때문.

 

따라서 Context API보다 외부 라이브러리를 거의 사용하는 편이다. 

 

 

 

🏄‍♀️오늘 정리

 

🍖<Single Page Application 단점 : >
- 컴포넌트 간 state 공유 어려움
- 부모 컴포넌트 -> 컴포넌트 (props로)

🍖<컴포넌트가 여러개 중접되는 것말고 다른 방법>
prop가 싫다면
1. Context API 리액트 기본문법 - context API를 쓰면 props 전송없이 state 공유 가능하다
2. Redux등 외부 라이브러리 설치

🍖< Context API 사용법 >
셋팅 1. createContext()
셋팅 2. <Context>로 원하는 컴포넌트 감싸기 ->  <Context1.Provider></Context1.Provider>
셋팅 3. value={{state1, state2...}} 공유원하는 거 넣기

🍖<Context API 특징>
1. state 변경 시 쓸데없는 것까지 제렌더링
2. 나중에 컴포넌트 재사용이 어려움