[React] React - 무카블로그

이번에 정리할 내용은 문맥입니다.

처음 이것을 배웠을 때 마술처럼 느껴졌습니다.

지나친 측면도 있지만 지금까지의 힘든 일을 돌파한다는 점에서 그 자체로 마법이었습니다.

또한 드릴링 지지대가 있으면 왜 귀찮게 합니까? 질문도 들었습니다.

'추천 관련글,

(마지막에 설명한 컨텍스트 경계에서 이를 파악하자)

내가 왜 이런 느낌을 받았는지 알아내도록 노력하겠습니다.

쉬운 목차

이 기사에서 알아보십시오

문맥

1.맥락

지금까지 우리는 데이터를 React에 전달하기 위해 소품을 사용했습니다.
- 하지만 이 방법은 직접 전달만 가능하다는 큰 한계가 있었습니다. (위든 아래든)
- 이 경우 상태 A를 여러 곳에서 사용하고 싶거나 직접 종속되지 않은 곳에서 사용하려면 많은 소품을 전달해야 합니다. (프롭 체인)
  - 즉, 앱이 작으면 괜찮지만 앱이 커지면 관리하기가 너무 어려워집니다…
- 이는 React에 존재하는 저장소인 컨텍스트라는 개념으로 해결할 수 있습니다.
컨텍스트 사용
1. 리액트 createContext();
  - createContext는 빈 컨텍스트를 만듭니다.
    - 빈 컨텍스트는 단순히 빈 상태의 구성 요소입니다.
  - 여기에서 특정 조건을 요인으로 지정할 수 있습니다. 일반적으로 객체로
2. 상태를 수신한 후 React.createContext는 구성 요소를 포함하는 객체를 반환합니다.
  - const AuthContext = React.createContext({~~~})
    - 즉, AuthContext는 구성 요소를 포함할 개체입니다.
    - 이 AuthContext는 컨텍스트 파일에 필요하지 않습니다. 다른 곳에 필요하므로 내보내십시오.
      - 기본 AuthContext 내보내기
3. 앱에서 컨텍스트를 사용하려면 다음 두 가지 작업을 수행해야 합니다.
  1. 배달해야
    - React에 컨텍스트가 있음을 알리기
    - 일반적으로 컨텍스트 상태는 전체 앱에 필요하므로 해당 상태를 닫습니다. 최상위 루트 파일인 index.js의 최상위 구성 요소입니다.
  2. 소비해야
    - 잠금, 듣기 등이 필요합니다.
    - 이 시점에서 useContext 후크가 사용됩니다.
      1. const authCtx = useContext(AuthContext);
      2. authCtx.isLoggedIn(컨텍스트에 정의된 상태)
위의 코드를 다시 보자.

//auth-context.js
const AuthContext = React.createContext({
  isLoggedIn: false,
  onLogout: () => {},
  onLogin: () => {},
});

export const AuthContextProvider = (props) => {
  const (isLoggedIn, setIsLoggedIn) = useState(false);
  const logoutHandler = () => {
    setIsLoggedIn(false);
  };
  const loginHandler = () => {
    setIsLoggedIn(true);
  };

  return (
    <AuthContext.Provider value={{ isLoggedIn: isLoggedIn, onLogout: logoutHandler, onLogin: loginHandler }}>
      {props.children}
    </AuthContext.Provider>
  );
};

export default AuthContext;

//index.js
import { AuthContextProvider } from "./context/auth-context";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <AuthContextProvider>
    <App></App>
  </AuthContextProvider>
);

컨텍스트 제약
- 구성 요소는 대체할 수 없습니다.
  - 예를 들어 재사용 가능한 버튼 구성 요소에 onClick={authCtx.onLogout}을 설정하면 해당 버튼은 일반적으로 재사용할 수 없습니다…
    - 재사용은 가능하지만 무조건 눌리면 로그아웃 되는 버튼이 됩니다.
  - 즉, 이러한 재사용 가능한 구성 요소에 소품을 사용하는 것이 좋습니다.
- 잦은 변경에는 적합하지 않음
  - 컨텍스트는 빈번한 상태 변경에 최적화되어 있지 않습니다.
  - 이 경우 Redux를 사용합니다(다음 기사에서 설명하겠습니다).

컨텍스트는 React로 대규모 웹 애플리케이션을 구축할 때 필수적인 기능입니다.

그러므로 이것을 완전히 이해해야 합니다.

다만, 위의 “자주 갈아 끼우기에 적합하지 않다”는 단점이 있다면 고민해볼 필요가 있다.

React에는 이 문제를 완벽하게 해결하는 또 다른 기능이 있습니다. 리덕스입니다.

다음 기사에서는 Redux와 Context와 Redux의 차이점에 대해 알아볼 것입니다.