React는 자바스크립트 라이브러리로, 사용자 인터페이스를 만들기 위해 사용됩니다. JSX는 리액트의 구문 확장으로, 자바스크립트 안에서 마크업을 작성할 수 있게 해줍니다.

라이프사이클

라이프사이클은 컴포넌트의 생성부터 파괴까지의 단계를 말합니다. React 컴포넌트의 라이프사이클은 크게 세 가지로 나뉩니다: 마운트, 업데이트, 언마운트.

마운트

• constructor(): 컴포넌트의 생성자로, 초기화 작업을 수행합니다.
• componentDidMount(): 컴포넌트가 처음으로 렌더링된 후에 실행됩니다.

업데이트

• shouldComponentUpdate(): 컴포넌트를 업데이트할지 결정합니다.
• componentDidUpdate(): 컴포넌트의 업데이트가 반영된 후에 실행됩니다.

언마운트

• componentWillUnmount(): 컴포넌트가 제거되기 전에 실행됩니다.

useState 사용하기

함수형 컴포넌트에서 useState를 사용하여 상태를 관리할 수 있습니다.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState(0)은 초기 상태 값으로 0을 가지며, setCount는 상태를 업데이트할 함수입니다.

React에서 JSX를 사용하여 컴포넌트를 렌더링하고 라이프사이클을 다루며, useState를 사용하여 상태를 조정할 수 있습니다.

더 많은 정보를 원하시면, React 공식 문서를 참고하세요.