React Context를 더 자주 사용해야 하는 이유

사람들은 React JS 앱의 컨텍스트를 생각할 때 종종 전역 상태를 생각합니다. "내 앱이 사용하도록 설정된 테마를 관리해야 합니다. 이에 대한 컨텍스트를 사용할 수 있습니다."이것이 잘못된 것은 아니지만 컨텍스트는 해당 사용 사례보다 훨씬 더 많이 사용될 수 있습니다. 저는 그것을 "캡슐화된 상태"로 생각하고 싶습니다.

컨텍스트를 트리의 구성 요소로 생각하여 그 아래에 있는 모든 자식에게 직접 소품을 제공할 수 있습니다. 이를 후크와 결합하면 구성 요소에 대한 깨끗한 API를 작성할 수 있습니다. Modal 구성 요소를 사용하는 간단한 예를 살펴보겠습니다.

다음은 모달을 닫기 위해 호출되어야 하는 onClose 소품을 허용하는 모달을 살펴보겠습니다. 모달은 자체 전환 시스템을 관리하므로 모달을 닫을 때 모달의 사용자 지정closeModal을 호출해야 합니다. 전환이 완료되면 전달된 onClose 소품이 호출됩니다.

// inside your Modal component...

const Modal = ({
    title,
    onClose
}) => {
    const closeModal = useCallback(() => {
        // Fake code, pretend to start the closing transition
        // and call `onClose` when the transition is done
        startCloseTransition(onClose);
    }, [onClose]);

    return (
        <ModalOverlay closeModal={closeModal}>
          <ModalContent>
            <ModalHeader title={title} closeModal={closeModal} />

            <ModalBody>
              {React.cloneElement(children, { closeModal })}
            </ModalBody>
          </ModalContent>
        </ModalOverlay>
    );
};

위의 Modal 구성 요소를 사용하는 해당 구성 요소는 다음과 같습니다.

const SomeComponent = () => {
    const [modalOpen, setModalOpen] = useState(false);

    return (
        <div>
            <button type="button" onClick={() => setModalOpen(true)}>Open Modal</button>

            {modalOpen ? (
                <Modal title="Some Modal" onClose={() => setModalOpen(false)}>
                    <SomeComponentModalContent />
                </Modal>
            ) : null}
        </div>
    );
};

const SomeComponentModalContent = ({
    closeModal
}) => {
    // `closeModal` is available here because the `Modal`
    // component passes it via the `cloneElement` call
    return (
        <div>
            <p>The content of the modal goes here</p>
            <button type="button" onClick={() => closeModal()}>Close the modal</button>
        </div>
    );
};

이 게시물을 계속 읽으십시오on my website.