221204(일)

김민석·2022년 12월 4일

Today I Learned

목록 보기

10/30

15장, Context API

Context API : 단계를 뛰어 넘어 state 전달 가능
--> 단점) <1> 성능 이슈 <2> 컴포넌트 재활용이 어렵다.

useContext Hook

Context는 리액트 컴포넌트간에 어떠한 값을 공유할수 있게 해주는 기능
Context를 단순히 "리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트간에 값을 전달하는 방법이다"
라고 접근을 하는것이 좋다.

Context 사용법

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}   
)}