State 실습편 [ 리액트 (React + Typescript) ]

1. React에서 State란 무엇인가?

리액트에서 상태(State)는 컴포넌트의 동적인 데이터를 저장하는 공간을 의미해요. 예를 들어, 사용자 입력, API 응답, UI의 상태 등 다양한 정보가 상태로 관리됩니다. 리액트의 상태는 컴포넌트가 렌더링되는 방식에 직접적인 영향을 미치기 때문에, 이를 잘 이해하고 활용하는 것이 중요하거든요.

리액트의 상태는 useState 훅을 통해 관리할 수 있어요. 이 훅은 두 가지 값을 반환하는데, 하나는 현재 상태의 값, 다른 하나는 상태를 업데이트하는 함수입니다. 예를 들어, 다음과 같은 코드로 상태를 정의할 수 있어요.

javascript const [count, setCount] = useState(0);

위 코드는 count라는 상태 변수를 정의하고, 초기값으로 0을 설정한 것이에요. setCount 함수를 통해 count의 값을 업데이트할 수 있습니다. 이런 방식으로 상태를 정의하고 관리하면, 컴포넌트가 재렌더링되면서 UI가 자동으로 업데이트되는 특징이 있어요.

2. useState 훅을 활용한 간단한 예제

이제 useState를 활용한 실제 예제를 살펴보겠습니다. 간단한 입력 폼을 만들어서 사용자가 입력한 값을 실시간으로 화면에 보여주는 컴포넌트를 만들어볼게요.

```javascript import React, { useState } from 'react';

const InputExample = () => { const [message, setMessage] = useState('');

const handleChange = (event) => { setMessage(event.target.value); };

return (

export default InputExample; ```

위 코드를 보면, message라는 상태 변수를 정의하고, setMessage 함수를 통해 입력된 값을 업데이트하고 있어요. 사용자가 입력할 때마다 handleChange 함수가 호출되고, 입력된 값이 message에 저장되죠. 이렇게 되면, 입력하는 내용이 실시간으로 <p> 태그 안에 반영된답니다.

이 예제에서 중요한 점은 상태가 업데이트될 때마다 컴포넌트가 재렌더링된다는 거예요. 그래서 사용자가 입력하는 대로 화면이 즉각적으로 업데이트되는 것이죠.

3. Props와 State의 조합으로 더 나은 컴포넌트 만들기

이제 Props와 State를 조합해서 좀 더 복잡한 컴포넌트를 만들어볼게요. 버튼과 레이블 컴포넌트를 별도로 만들어서 Props를 통해 상태를 전달하는 구조를 만들어보겠습니다.

먼저 버튼 컴포넌트를 만들어볼게요.

javascript const Button = ({ onClick, label }) => { return <button };

이제 레이블 컴포넌트도 만들어보죠.

javascript const Label = ({ text }) => { return <span>{text}</span>; };

여기서 메인 컴포넌트는 다음과 같이 구성할 수 있어요.

```javascript import React, { useState } from 'react'; import Button from './Button'; import Label from './Label';

const CounterComponent = () => { const [count, setCount] = useState(0);

const increment = () => setCount(count + 1); const decrement = () => setCount(count - 1);

return (

export default CounterComponent; ```

이렇게 하면 버튼 클릭 시 카운트가 증가하거나 감소하고, 현재 카운트가 Label에 표시돼요. 이 구조는 컴포넌트를 재사용할 수 있는 장점을 제공해줍니다. 예를 들어, 버튼과 레이블을 여러 곳에서 재사용할 수 있죠.

리액트에서 상태와 Props를 조합하는 것은 컴포넌트를 더욱 유연하게 만들어주는 중요한 패턴이에요. 이 방법을 통해 코드의 가독성이 높아지고, 유지보수도 쉬워지거든요.