React.js의 정보 흐름

React.js의 정보 흐름이 JavaScript와 다른 이유는 무엇입니까?
전통적인 JS 프로그래밍에서는 단일 페이지 문서가 모든 작업을 수행하는 데 사용되었습니다. 이것은 변수의 범위가 함수에서 함수로의 통신에 대한 유일한 장벽임을 의미합니다. React.js를 사용하면 애플리케이션에서 JavaScript의 구성과 가독성을 크게 높이는 구성 요소를 사용할 수 있습니다. React.js는 구성 요소 계층 구조 또는 구성 요소 트리를 만드는 기능을 부여합니다. 이 구성 요소 트리에는 서로 통신하는 방법이 필요합니다.

정보를 트리 아래로 전달하는 방법
정보는 props를 사용하여 부모 구성 요소에서 자식 구성 요소로 전달됩니다.
다음 소품을 자식에게 전달해야 합니다.

import React from "react"
import Child from "./Child"

function Parent(){
const x="this is from my parent"
return(
   <Child x={x}/>
)
}

export default Parent;

그런 다음 자녀가 수락합니다.

import React from "react"

function Child({x}){
return(
   console.log(x)
)
}

export default Child;

이 하위 구성 요소의 console.log는 상위 함수에서 x에 할당된 문자열을 출력합니다.

정보를 트리 위로 전달하는 방법
반대로 데이터 흐름으로 알려진 트리 위로 정보를 전달하는 것은 조금 더 복잡해집니다. 이렇게 하려면 상위 구성 요소의 함수를 하위 구성 요소에 전달한 다음 상위 구성 요소에 필요한 데이터로 호출해야 합니다.

import React from "react"
import Child from "./Child"

function Parent(){
  function getName(nameFromChild){
    console.log(name)
  }
return(
   <Child getName={getName}/>
)
}

export default Parent;

그런 다음 자녀가 수락합니다.

import React from "react"

function Child({getName}){
  const name="Steve"
  getName(name)
}

export default Child;

그러면 "Steve"의 console.log가 반환됩니다.

결론
정보 흐름의 문제는 처음에는 벅차게 보일 수 있습니다. 구성 요소 트리를 위아래로 수백 개의 소품 및 콜백 함수를 전달한 후에는 제2의 천성처럼 느껴지며 구성 및 가독성 측면에서 얻는 이점이 약간의 학습 곡선보다 훨씬 큽니다. 읽어 주셔서 감사합니다!!!