역 데이터 흐름 - 반응 방식

하위 구성 요소에서 상위 구성 요소로 데이터, 즉 소품/속성을 가져오려고 하는 React에 갇혀 있습니까? 아니면 형제 구성 요소 간에 데이터를 공유하려고 합니까? React Inverse Data Flow가 들어오는 곳이므로 걱정하지 마십시오.

역 데이터 흐름은 함수를 통해 자식 구성 요소에서 부모 구성 요소로 데이터를 보내는 React의 기능이며, 형제 구성 요소에 액세스할 수 있습니다. 예를 들어 useContext hook 과 같이 React에서 동일한 작업을 수행하는 데 사용할 수 있는 다양한 방법이 있습니다. 그러나 웹 응용 프로그램이 복잡한 전자 상거래 웹 사이트나 이와 유사한 웹 사이트가 아닌 경우 올바른 위치에 있습니다.

A. React 애플리케이션 생성

이를 시연하기 위해 간단한 React 앱을 만들어 보겠습니다. npm이 설치되어 있다고 가정하면 npx create-react-app app-name을 사용하여 React 애플리케이션을 생성합니다. npm이 설치되어 있지 않은 경우 설치 절차를 수행할 수 있습니다click here.

다음으로 부모 및 형제 구성 요소를 보관할 구성 요소 폴더를 src 폴더 안에 만듭니다. 아래 이미지는 폴더 구조를 보여줍니다.







애플리케이션을 실행하면 위의 이미지와 유사한 출력이 표시됩니다.

B. 설정 상태

useState ParentComponent에서 가져오는 후크는 구성 요소의 상태를 관리하는 데 도움이 됩니다. useState로 정의된 변수를 사용하여 자식 구성 요소에서 부모 구성 요소로 역으로 데이터를 가져오는 getSiblingData 함수를 만듭니다. 아래 이미지 참조:



B. 자식에서 부모 구성 요소로 데이터 가져오기

<SiblingBrother usernameData={username} dataFromHere={getSiblingData} />

먼저 SiblingBrother 구성 요소에 전달한 소품(위 참조)을 분해한 다음 사용자 입력을 가져올 입력 텍스트 필드를 만듭니다. 이제 소품의 입력 필드에 값을 할당하고 데이터를 다시 ParentComponent로 보낼 onChange 함수를 전달합니다. 아래 이미지를 참조하십시오.



씨. 마지막으로...

모든 것이 제자리에 있으면 정의한 사용자 이름 변수를 SiblingSister 구성 요소에 전달한 다음 출력용으로 렌더링하는 작업만 남습니다.

위의 ParentComponent 이미지(위에서 두 번째 이미지)에는 아래와 같은 유사한 코드가 있습니다.

<SiblingSister username={username} />

사용자 이름 소품은 SiblingBrother에서 ParentComponent, SiblingSister로 사용자 이름 데이터와 함께 전달됩니다.



이제 데이터가 입력 필드에 입력되면 React는 상태를 업데이트하고 이 정보는 SiblingSister 구성 요소로 전달됩니다.



위와 같이 출력되어야 합니다.

React에서 역방향 데이터 흐름을 사용한 것을 축하합니다.