Context

# 리덕스를 쓰다가 굳이 데이터변화가 없는대 리덕스를 써야하는가 라는 의구심이 들었는대

역시나 데이터변화가 필요없을땐 단순하게 다크모드를 한다거나 레이아웃만 변경된다거나 등등 - 저서에서도 단순하게 쓸때만 사용하라고 한다.

지난번 코드를 Context로 바꿔보았음

1.세팅하기

- 리액트안에 내장된 기능이라 설치할것없음

import React, { useState, createContext} from 'react' // createContext추가

const pageInfo = createContext(); //1.생성하기 - Context api를 사용하겠다고 정의한것
export { pageInfo }; //2.다른파일에서 할경우는 export를 해줘야함

const App = () => {
  const [pageinfo, setPageInfo] = useState(false); //사용할 상태값 설정
  console.log(pageinfo);

  return (
    <div className={`App ${pageinfo ? "search" : ""}`}> {/**다크테마라든가 레이아웃마다 다르게 클래스 주고싶을때 - 전테스트로해봄  */ }
      <pageInfo.Provider value={{ pageinfo, setPageInfo }}> {/**소스 감싸기, 위에 생성한 createContext 이름과 맞추기  */ }
        //소스코드들~
      </pageInfo.Provider>
    </div>
  )
}
export default App;

Context는 리액트 컴포넌트간에 어떠한 값을 공유할수 있게 해주는 기능 
주로 Context는 전역적(global)으로 필요한 값을 다룰 때 사용하는데 꼭 전역적일 필요는 없다. 
Context를 단순히 "리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트간에 값을 전달하는 방법이다" 라고 접근 하는 것이 좋다

2.사용하기

1)결과페이지

import React, { useEffect, useState,useContext } from 'react' //1.useContext import
import { pageInfo } from "./App"; //위에 선언한 pageInfo import

const SearchResult = () => {
 const { pageinfo, setPageInfo } = useContext(pageInfo); //2.사용하기 - Provider 비구조할당 - 객체  
 //useContext을 사용해 받아올곳에 useContext(Context이름)으로 가져옴
 useEffect(() => {
        setPageInfo(true); //true
    }, [query, page]);
    
    //소스들~~
}

2)메인페이지

import React, { useEffect, useRef, useState, useContext } from 'react';
import { pageInfo } from "./App";

const Main = () => {
	const { pageinfo, setPageInfo } = useContext(pageInfo);
    useEffect(() => { 
         setPageInfo(false); //false
    },[])
	//소스들~
}

3)랜더딩될 컴포넌트

import React, { useState,useEffect,useContext } from 'react'
import { pageInfo } from "./App";

const Search = () => {
  const { pageinfo, setPageInfo } = useContext(pageInfo);
  
  useEffect(() => {
    if (pageinfo) {
    } else { 
      setInput("");
    }   
   },[pageinfo])
   //소스들~
}

+++위의코드를 보면 반복이다 

1.useContext import
2.전역에 생성한 Context import
3.사용할 상태값을 소스안에 적기
4.사용해보기

저서: https://ko.reactjs.org/docs/context.html

Context – React

 

도움받은곳 : https://velog.io/@velopert/react-context-tutorial