[react] 컴포넌트 상태 관리 및 상호작용

26 Dec 2023

react

React 애플리케이션을 개발할 때 가장 중요한 부분 중 하나는 컴포넌트의 상태를 효과적으로 관리하고 상호작용하는 것입니다. 이 기술 블로그에서는 React 컴포넌트의 상태를 관리하고 컴포넌트 간의 상호작용을 다루는 방법에 대해 알아보겠습니다.

상태(State) 관리

React에서 상태(State)는 컴포넌트의 데이터를 저장하고 관리하는 데 사용됩니다. 상태는 컴포넌트가 렌더링될 때 변할 수 있는 데이터를 나타내며, useState 훅을 사용하여 함수형 컴포넌트에서 상태를 관리할 수 있습니다.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

위 예시에서 useState 훅을 사용하여 count 상태를 정의하고, setCount 함수를 사용하여 상태를 업데이트합니다.

상호작용(Interaction) 구현

React 컴포넌트 간의 상호작용은 부모-자식 컴포넌트 간의 데이터 전달 및 이벤트 핸들링을 포함합니다. 이를 위해 props를 사용하여 데이터를 자식 컴포넌트로 전달하고, 이벤트를 핸들링하여 부모 컴포넌트의 상태를 업데이트할 수 있습니다.

import React, { useState } from 'react';

function ParentComponent() {
  const [message, setMessage] = useState('');

  const handleMessageChange = (newMessage) => {
    setMessage(newMessage);
  };

  return (
    <div>
      <ChildComponent onMessageChange={handleMessageChange} />
    </div>
  );
}

function ChildComponent({ onMessageChange }) {
  const handleInputChange = (e) => {
    onMessageChange(e.target.value);
  };

  return (
    <div>
      <input type="text" onChange={handleInputChange} />
    </div>
  );
}

위 예시에서 ParentComponent에서 message 상태를 정의하고, handleMessageChange 함수를 사용하여 자식 컴포넌트인 ChildComponent로부터 데이터를 전달받아 상태를 업데이트합니다.

결론

React 애플리케이션을 개발할 때 상태 관리 및 상호작용은 매우 중요합니다. useState 훅을 사용하여 상태를 관리하고, props를 통해 데이터 전달 및 이벤트 핸들링을 통해 컴포넌트 간의 상호작용을 구현할 수 있습니다. 이를 통해 유연하고 동적인 사용자 경험을 제공할 수 있습니다.

참조: