개념 반응 - 용어 및 아이디어

내 반응 튜토리얼 비디오 세트 =>

리액트란?

React는 프론트엔드 UI 라이브러리입니다. 이 라이브러리의 목적은 프론트엔드 응용 프로그램을 만드는 데 도움이 되는 것입니다. React의 장점 중 일부는 ...

캡슐화: 구성 요소의 형태로 UI/UX의 조각을 구축함으로써 프로젝트의 전체 코드를 줄이고 차례로 버그를 줄이고 모듈성을 개선할 수 있는 잠재적으로 재사용 가능한 조각을 만듭니다.

반응 데이터: 상태를 사용하여 반응하고 가상 dom은 응용 프로그램 "상태"의 변경 사항을 모니터링하고 UI를 업데이트할 수 있습니다. 필요한.

상태 대 소품

표준 변수도 있지만 구성 요소의 많은 데이터는 상태 또는 소품의 두 가지 범주 중 하나에 속합니다.

이것을 생각하는 한 가지 방법은 자신을

<Human/>
요소. 당신의 상태는 당신이 내부적으로 알고 있는 것입니다. 아무도 당신에게 당신의 이름, 감정, 의견 등을 말하지 않아도 내부 지식입니다. 상태가 변경되면 외부 작업이 즉시 변경됩니다. 슬프면 얼굴이 새빨개질 수도 있고, 의견이 바뀌면 투표를 하거나 다르게 행동할 수도 있습니다. 따라서 귀하의 상태가 변경되면 다른 사람들이 귀하로부터 경험하는 것도 변경됩니다. 이것이 반응에서 상태가 작동하는 방식입니다. 일반적으로 항상 시각 효과가 있는 것은 아니지만 상태가 구성 요소 업데이트를 변경할 때입니다.

반면에 외부에서 얻는 지식도 있습니다. 예를 들어 뉴스에서 일기예보를 제공하면 일기예보를 알게 되면 상태(무엇을 입어야 하는지에 대한 의견)가 변경될 수 있으므로 예측에 따라 행동이 달라지지만 무엇을 통제할 수는 없습니다. 예측은 외부의 힘이 당신에게 이것을 줄 것이고 당신의 상태는 내부적으로 변할 것입니다.

이것은 props의 개념으로, 일반적으로 부모로부터 구성 요소에 외부적으로 제공되는 정보입니다.

참고: 감정에 비해 상태를 처음 들었던 Joe Keohan에게 크레딧을 주었습니다.
<Human forecast="sunny"/>
따라서 구성 요소에 들어오는 모든 데이터는 상태(내부) 또는 소품(외부)이 됩니다.

수명 주기

수명 주기는 본질적으로 특정 일이 항상 특정 지점에서 발생해야 한다는 것을 의미합니다. 예를 들어, 우리의

<Human/>
구성 요소가 생성될 때 출생 증명서가 제공되어야 하고 1년 더 오래된 모든 생일이 있어야 합니다. 구성 요소가 제거되면 사망 증명서를 받습니다. 구성 요소의 주기는 DOM에서 마운트, 업데이트 및 제거되는 것입니다. 우리는 인간 구성 요소의 수명 주기를 다음과 같이 작성할 수 있습니다.

React.useEffect(() => {
  console.log("You are born, you get a birth certificate")

  return () => console.log("you have died, you get a death certificate")
}, [])

React.useEffect(() => {
  console.log("Happy Birthday")
}, [age])

문맥

귀하의 애플리케이션이 바닥이 있는 건물이라고 상상해 보십시오. 최상층에는 우리의

<App/>
그리고 어린 시절 우리는

<Floor80/>
그리고

<Floor79/>
등등. 1층으로 내려가고 싶은 데이터가 있습니다. 기본적으로 유일한 옵션은 계단통입니다. 즉, 80층, 79층, 78층 등으로 걸어 내려가야 합니다. 기본적으로 이것이 통과하는 과정입니다. props를 하나의 구성 요소에 전달한 다음 해당 구성 요소가 해당 데이터를 props로 자식에게 전달하는 식입니다.

React Context API를 사용하는 것은 건물에 엘리베이터를 만드는 것과 같습니다. 각 층을 걸어 내려가는 대신 컨텍스트 엘리베이터를 타고 1층으로 내려갈 수 있습니다.