React - UseState에서 다양한 타입

React에서 useState 혹은 다양한 타입의 데이터를 상태로 관리할 수 있다. 숫자, 문자열, 불리언, 객체, 배열 등 어떤 타입이든 다룰 수 있으며, 이를 통해 컴포넌트의 동작과 렌더링을 제어한다.

 

숫자형 상태 - 카운터

const [count, setCount] = useState<number>(0);

버튼 클릭으로 숫자 상태(count)를 증가시키는 로직. 숫자는 기본적으로 0부터 시작하는 경우가 많음

문자형 상태 - 입력 필드

const [name, setName] = useState<string>("");

input 필드에 사용자 이름을 입력받아 실시간으로 상태를 업데이트한다.

불리언상태 - 토글제어

const [isVisiable, setIsVisiable] = useState<boolean>(false);

true/false 값을 기반으로 보여주기 여부를 제어할 수 있다.

객체 상태 - 사용자 정보

interface IUser {
  id: number;
  name: string;
}

const [user, setUser] = useState<IUser>({ id: 0, name: "" });

객체 상태는 구조분해나 업데이트시 spread연산자를 통해 개별 필드를 수정한다. 출력시에는 JSON, Stringfy()로 문자열화하여 확인할 수 있다.

 

배열상태 - 리스트 관리

const [items, setItems] = useState<string[]>([]);

배열상태는 ...spread 연산자를 활용해 기존 배열에 요소를 추가하는 방식으로 업데이트 한다.

 

상태를 자식 컴포넌트로 전달하기 (State vs Props)

상태와 속성(Props)은 React에서 매우 중요한 개념이다. 특히, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 이 차이가 핵심이다.

상태 (State)

• 컴포넌트 내부에서 직접 관리
• 상태가 바뀌면 해당 컴포넌트가 다시 렌더링됨
• 다른 컴포넌트에 전달하려면 Props를 사용해야 함

속성 (Props)

• 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터
• 읽기 전용
• 자식 컴포넌트에서는 Props를 직접 수정할 수 없음

export type UserType = {
  username: string;
  height: number;
};

const initialValue: UserType = {
  username: "roxan",
  height: 157,
};

const [userInfo, setUserInfo] = useState<UserType>(initialValue);
const [submittedData, setSubmittedData] = useState<UserType | undefined>();

사용자가 입력한 데이터를 userInfo 상태로 관리하고, 전송 버튼을 누르면 해당 데이터를 자식 컴포넌트(ChildComponent)에 Props로 전달한다.

 

입력이벤트 처리

input 요소의 name속성과 상태 객체의 키 이름이 일치한다면, 이 패턴은 매우 유용

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const { name, value } = e.target;
  setUserInfo({ ...userInfo, [name]: value });
};

 

 

자식컴포넌트에서 Props로 받은 데이터 사용하기

부모 컴포넌트에서 전달한 데이터를 자식 컴포넌트에서는 Props로 받아 사용할 수 있다. 이때 중요한 포인트는 다음과 같다.

• 자식은 전달받은 데이터를 수정할 수 없음 (읽기 전용)
• 데이터 유무에 따라 조건부 렌더링 필요
• JSX는 반드시 단일 루트 요소를 반환해야 함

import React from 'react'
import { UserType } from './UseState06';

type ChildProps = {
  userData: UserType | undefined;
}

function ChildComponent({ userData }: ChildProps) {
  return (
    <div>
      <p>자식 컴포넌트 (부모로부터 데이터를 전달받음)</p>
      {userData && (
        <>
          <p>사용자 이름: {userData.username}</p>
          <p>사용자 키: {userData.height}</p>
        </>
      )}
    </div>
  );
}

export default ChildComponent;

• userData && (...) 패턴은 조건부 렌더링으로, userData가 존재할 때만 JSX를 렌더링한다.
• <>...</>는 React Fragment 문법으로, 불필요한 div 없이 여러 요소를 감쌀 수 있다.
• 단일 루트 노드를 반환해야 하므로 Fragment 또는 하나의 div로 감싸야 한다.