React.js 상태 및 소품

React는 출시된 지 불과 10년이 채 안 된 이후 점점 인기를 얻고 있는 Javascript 라이브러리입니다. 현재 가장 인기 있고 널리 사용되는 Javascript 라이브러리입니다. 이 블로그에서는 React state와 props가 어떻게 작동하는지에 대해 논의할 것입니다.

구성품

props와 state에 들어가기 전에 먼저 React에서 컴포넌트가 무엇인지 설명하고 싶습니다. 컴포넌트는 기본적으로 props를 받아서 JSX를 반환하는 함수입니다. 내부에 재사용 가능한 코드를 작성할 수 있고 해당 코드를 실행하여 DOM에 렌더링할 수 있기 때문에 React의 빌딩 블록입니다. 다음은 기본 구성 요소입니다.

function Home() {
  return (
    <div id="home">
      <h1>Home</h1>
    </div>
  );
}

이것은 "홈"이라는 구성 요소입니다. 이 구성 요소는 소품을 사용하지 않지만 JSX를 반환합니다. 이 구성 요소는 내부 텍스트가 "Home"인 h1 요소와 함께 "home"이라는 id를 가진 div 요소를 렌더링합니다.

소품

React에서 props는 속성의 줄임말입니다. React는 소품을 사용하여 React 구성 요소 간에 데이터를 전달합니다. React에서는 상위 구성 요소에서 하위 구성 요소로만 props를 전달할 수 있습니다. 하위 구성 요소에서 상위 구성 요소로 직접 전달할 수 없습니다. 다음은 상위 구성 요소에서 하위 구성 요소로 전달되는 소품의 예입니다.

function ParentComponent() {
    return (
        <ChildComponent name="child" />
)
}

function ChildComponent(props) {
    return (
       <h1>{props.name}</h1>
)
}

따라서 여기에서 상위 구성요소는 소품을 통해 하위 구성요소로 데이터를 전달합니다. 그것은 이름을 부여하고 그 이름은 "자식"입니다. 부모가 데이터를 전달할 때 React는 부모가 전달하는 키와 값 쌍으로 props 객체를 생성합니다. 따라서 이 예에서는 이름의 키와 "자식"이라는 해당 값을 사용하여 props 객체가 생성됩니다. 따라서 이제 자식이 이 데이터에 액세스하려면 props 개체를 값으로 수락해야 합니다. 그런 다음 해당 props 개체에 점 표기법을 사용하여 내부 데이터에 액세스할 수 있습니다.

상태

React에서 상태는 사용자가 React 애플리케이션과 상호 작용할 때 시간이 지남에 따라 변경되는 데이터입니다. 동적이며 동적 앱을 쉽게 만들 수 있습니다. 상태를 사용하면 부모 구성 요소가 업데이트된 데이터를 보내지 않아도 구성 요소 내에서 데이터를 업데이트하고 변경할 수 있습니다. 상태를 사용하려면 다음과 같이 파일 내에서 useState라는 반응 후크를 가져와야 합니다.

import { useState } from "react"

이제 일부 데이터가 동적이고 시간이 지남에 따라 변경될 수 있도록 하려면 useState를 사용하여 해당 데이터에 상태를 설정해야 합니다. 예를 들어 숫자 카운트가 있고 사용자가 페이지에서 무언가를 할 때마다 그 카운트가 증가한다고 가정합니다. 이와 같이 count 변수에 상태를 설정해야 합니다.

const [count, setCount] = useState(0)

useState는 두 개의 변수가 있는 배열을 자동으로 반환합니다. 첫 번째 변수(카운트)는 해당 상태(0)의 현재 또는 초기 값을 참조합니다. 두 번째 변수(setCount)는 첫 번째 변수의 상태를 업데이트할 수 있는 함수입니다. 상태를 업데이트하거나 설정하려면 두 번째 변수를 호출하고 그 안에 상태를 업데이트할 방법을 입력합니다. 예를 들어:

setCount(count + 1)