Context API : 단계를 뛰어 넘어 state 전달 가능
--> 단점) <1> 성능 이슈 <2> 컴포넌트 재활용이 어렵다.
Context는 리액트 컴포넌트간에 어떠한 값을 공유할수 있게 해주는 기능
Context를 단순히 "리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트간에 값을 전달하는 방법이다"
라고 접근을 하는것이 좋다.
import { createContext } from 'react';
function App() {
const MyContext = createContext('default value');
//기본값을 설정해 줄 수 있다.
return (
<MyContext.Provider value="Hello World">
<GrandParent />
</MyContext.Provider>
);
}
이렇게 하면, 원하는 컴포넌트에서 useContext
라는 Hook을 사용하여 Context에 넣은 값에 바로 접근
import { createContext, useContext } from 'react';
function Message() {
const value = useContext(MyContext);
return <div>Received: {value}</div>;
}
최종 코드 view
import { createContext, useContext } from 'react';
const MyContext = createContext();
function App() {
return (
<MyContext.Provider value="Hello World">
<GrandParent />
</MyContext.Provider>
);
}
function GrandParent() {
return <Parent />;
}
function Parent() {
return <Child />;
}
function Child() {
return <GrandChild />;
}
function GrandChild() {
return <Message />;
}
function Message() {
const value = useContext(MyContext);
return <div>Received: {value}</div>;
}
export default App;
redux : state(데이터)를 한곳(store)에 모아 놓고 모든 컴포넌트에서 쉽게 접근 가능
npm install @reduxjs/toolkit
npm install redux redux react-redux
import { configureStore, createSlice } from "@reduxjs/toolkit";
createSlice( {
name : 변수 이름,
initialState : 초기값
})
export default configureStore({
reducer : {
상태변수 등록하는 부분
}
})
1) 설정 및 context로 원하는 컴포넌트 감싸기
src/App.js
import React, { createContext} from 'react';
export let StockContext = createContext() //설정
function App() {
let [stock] = useState([7, 13, 20]) //넘길 값 설정
return(
<Routes>
<Route path='/detail/:id' element={
<StockContext.Provider value={{stock}}>
<Detail shrits={shrits} />
</StockContext.Provider>
}/>
</Routes>
)}
2) 적용
src/components/Detail.js
import { StockContext } from '../App'
import { useContext } from "react";
function Detail(props) {
let {stock} = useContext(StockContext);
return (
{stock}
)}
결과 : 71320 출력됨.
{stock[1]}
로 13만 뽑아서 사용도 가능