[230706] React useContext

여름휴가 끝나고 오랜만에 출근하고 공부했다.
다시 일상 화이팅

1. React useContext

• 전역적으로 데이터를 공유 가능

• useContext를 사용하면 컨텍스트의 값이 변경될 때마다 자동으로 컴포넌트가 다시 렌더링된다.
• 이는 컨텍스트 값이 업데이트되면 해당 값을 사용하는 모든 컴포넌트가 업데이트되어 일관된 상태를 유지할 수 있도록 도와줌

1. 컨텍스트 생성하기

    1 	import React from 'react';
    2
    3 	// 컨텍스트 생성
    4 	const MyContext = React.createContext();
    5
    6 	// 컨텍스트 제공자 컴포넌트 생성
    7 	const MyProvider = ({ children }) => {
    8 	  const sharedValue = "Shared Value"; // 공유할 데이터
    9
   10 	  return (
   11 	    <MyContext.Provider value={sharedValue}>
   12 	      {children}
   13 	    </MyContext.Provider>
   14 	  );
   15 	};

2. 컨텍스트 사용하기

    1 	import React, { useContext } from 'react';
    2
    3 	const MyComponent = () => {
    4 	  const value = useContext(MyContext); // 컨텍스트 값 가져오기
    5
    6 	  return (
    7 	    <div>
    8 	      <p>Shared Value: {value}</p>
    9 	    </div>
   10 	  );
   11 	};
   12
   13 	const App = () => {
   14 	  return (
   15 	    <MyProvider> {/* 컨텍스트 제공자로 감싸기 */}
   16 	      <MyComponent />
   17 	    </MyProvider>
   18 	  );
   19 	};
   20
   21 	export default App;