리액트(React)는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리로, 컴포넌트 기반의 접근 방식을 채택하고 있습니다. 컴포넌트는 구성 요소를 재사용 가능한 독립적인 부분으로 분리하여 유지보수와 확장성을 개선하는 데 도움이 됩니다. 리액트에서 컴포넌트는 상태(State)와 속성(Props)이라는 두 가지 유형의 데이터를 사용하여 동작합니다.

상태(State)

리액트 컴포넌트의 상태는 해당 컴포넌트 내에서 관리되는 데이터입니다. 상태는 컴포넌트가 렌더링되는 동안 변경될 수 있으며, 변경되면 컴포넌트는 재렌더링됩니다. 상태는 useState 훅을 사용하여 함수형 컴포넌트에서 관리됩니다.

다음은 상태를 사용하여 버튼 클릭 수를 추적하는 예시 코드입니다.

import React, { useState } from 'react';

function ButtonCounter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>버튼이 {count}번 클릭되었습니다.</p>
      <button onClick={() => setCount(count + 1)}>클릭</button>
    </div>
  );
}

useState 훅을 사용하여 count 상태와 해당 상태를 갱신하는 setCount 함수를 선언했습니다. 버튼을 클릭할 때마다 count 상태가 갱신되어 화면에 표시됩니다.

속성(Props)

리액트 컴포넌트의 속성은 해당 컴포넌트에 외부에서 전달되는 데이터입니다. 속성은 컴포넌트 내에서 변경할 수 없으며, 부모 컴포넌트로부터 전달됩니다. 속성은 함수형 컴포넌트의 매개변수로 전달되거나, 클래스형 컴포넌트의 this.props 객체를 통해 접근할 수 있습니다.

다음은 속성을 사용하여 이름을 표시하는 예시 코드입니다.

import React from 'react';

function Greeting(props) {
  return <p>안녕하세요, {props.name}님!</p>;
}

function App() {
  return <Greeting name="홍길동" />;
}

위 예시에서 Greeting 컴포넌트는 name 속성을 받아와 화면에 표시합니다. App 컴포넌트에서 Greeting을 사용할 때, name 속성에 “홍길동”이 전달되어 이름이 화면에 표시됩니다.

상태와 속성은 리액트 컴포넌트의 핵심 기능이며, 이를 적절하게 활용하여 유연하고 재사용 가능한 컴포넌트를 개발할 수 있습니다.

위 내용에 대한 레퍼런스는 다음과 같습니다:

• 리액트 공식 문서

이상으로 리액트 컴포넌트의 상태(State)와 속성(Props)에 대한 내용을 정리해 보았습니다. 감사합니다.