React에서 props와 state를 사용하는 방법

이 블로그 게시물은 JavaScript의 상위 집합인 React 및 Typescript를 사용합니다. 초보자인 경우 this post을 확인하여 전제 조건을 얻을 수 있습니다.

React는 강력한 UI 라이브러리이며 구성 요소 트리와 함께 작동합니다. 클래스 기반 구성 요소 또는 기능적 구성 요소일 수 있습니다. React 버전 16.8 및 후크 이후로 클래스 기반 구성 요소는 기능적 구성 요소의 이점에 덜 사용됩니다.

props와 state는 React 컴포넌트에서 사용되는 두 종류의 변수입니다.

공통점

소품과 상태를 분리하기 전에 겹치는 위치도 식별해 봅시다.

일반 JS 개체입니다

.

구성요소가 변경되면 React가 구성요소의 렌더링 업데이트를 트리거합니다

.

결정론적입니다. props와 state의 동일한 조합은 동일한 출력을 생성해야 합니다.

소품

Props라는 용어는 속성의 바로 가기입니다.

불변입니다. 즉, 변경할 수 없습니다. 기능 구성 요소는 이를 매개 변수로 받습니다. 소품을 변경하면 구성 요소의 렌더링 업데이트가 트리거됩니다.

여기서 볼 수 있듯이 구성 요소 ItemsList는 문자열 목록인 소품을 가져옵니다.

import { FunctionComponent, useState } from "react";

interface ItemsListProps {
  list: Array<string>;
}

const ItemsList: FunctionComponent<ItemsListProps> = ({ list }) => {
  console.log("ItemsList rerender");

  return (
    <ul>
      {list.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  );
};

function App() {
  const [list, setList] = useState(["item1", "item2", "item3"]);

  const handleClick = () => {
    setList([...list, "item4"]);
  };

  return (
    <div className="App">
      <button onClick={handleClick}>Add</button>
      <ItemsList list={list} />
    </div>
  );
}

export default App;

버튼을 클릭하면 목록에 항목을 추가하고 소품을 업데이트합니다. 변경 사항을 보고하기 위해 구성 요소가 실행됩니다. 브라우저의 콘솔에서 확인할 수 있습니다.

상태

상태는 변경 가능하며 시간이 지남에 따라 변경될 수 있습니다.

구성 요소가 마운트될 때 기본값을 받습니다. 구성 요소는 내부적으로 상태를 관리합니다. 하위 구성 요소에 전달된 상태는 하위 구성 요소의 소품이 됩니다.

위의 예를 보면 구성 요소 앱의 목록이 상태입니다. setList 메서드는 이 상태를 변경할 수 있습니다.

결론

이제 소품과 상태의 차이점을 알았습니다.

소품은 자식 구성 요소에 데이터를 전달하는 데 사용됩니다. 상태는 데이터를 구성 요소로 관리하는 데 사용됩니다. 이 게시물은 Typescript를 사용한 React의 기초에 대한 시리즈입니다.

다시 확인하거나 소셜 미디어에서 저를 팔로우하여 다음 단계를 알아보세요.

나중에 봐요!