[typescript] JSX에서 상태에 따른 렌더링 방법

18 Dec 2023

typescript

JSX를 사용하여 React 애플리케이션을 개발할 때, 상태에 따라 동적으로 UI를 렌더링하는 것은 매우 중요합니다. TypeScript를 사용하면 이를 더 견고하게 처리할 수 있습니다.

이 블로그 포스트에서는 TypeScript와 JSX를 사용하여 상태에 따라 렌더링하는 방법을 살펴보겠습니다.

상태에 따른 렌더링

React 컴포넌트에서는 상태(state)가 변경될 때마다 UI를 업데이트할 수 있습니다. TypeScript와 JSX를 사용하여 상태에 따라 렌더링하는 방법을 살펴보겠습니다.

TypeScript로 상태 정의하기

먼저, TypeScript를 사용하여 컴포넌트의 상태를 정의합니다.

import React, { useState } from 'react';

interface MyComponentState {
  isClicked: boolean;
}

const MyComponent: React.FC = () => {
  const [state, setState] = useState<MyComponentState>({
    isClicked: false,
  });

  // 상태 변경 로직은 생략
}

위 예시에서는 MyComponent의 상태를 isClicked라는 boolean 값으로 정의하였습니다. useState 훅을 사용하여 초기 상태를 설정하고, 상태 변경에 대한 로직은 생략하였습니다.

JSX에서 상태에 따른 렌더링

이제 상태에 따라 UI를 렌더링하는 예시를 살펴보겠습니다.

import React from 'react';

const MyComponent: React.FC = () => {
  // 상태와 상태 변경 로직은 생략

  return (
    <div>
      {state.isClicked ? 
        <span>클릭됨</span> :
        <button onClick={() => setState({ isClicked: true })}>클릭</button>
      }
    </div>
  );
};

위 예시에서는 state.isClicked 값에 따라 다른 UI를 렌더링하고 있습니다. isClicked가 true이면 “클릭됨”을, 그렇지 않으면 “클릭” 버튼을 렌더링하고 있습니다.

결론

TypeScript와 JSX를 사용하여 상태에 따라 렌더링하는 방법을 살펴보았습니다. 상태에 따라 다양한 UI를 동적으로 렌더링하여 사용자와 상호작용하는 React 애플리케이션을 개발할 때, 이러한 방법들을 참고하시기 바랍니다.

이상으로, TypeScript와 JSX를 이용한 상태에 따른 렌더링 방법에 대해 알아보았습니다.

참고 문헌:

React 공식 문서: https://ko.reactjs.org/docs/hooks-state.html

다음으로 [TypeScript]에서 작성한 블로그 글에 이어서 [React]에 대해 다룬 포스트를 올렸으면 좋겠습니다.