useState

'useState'는 React에서 간단한 상태를 관리하기 위한 훅(Hook)중 하나이다.

React는 컴포넌트 기반 라이브러리로, 컴포넌트 상태를 관리, 화면을 업데이트하고 사용자 인터페이스를 동적으로 제어하는데 사용된다.

'useState'는 함수 컴포넌트에서 상태를 추가하고 업데이트 하기 위해 사용된다.

'useState'를 사용하면 컴포넌트의 상태를 선언하고 초기값을 설정한다. 이 상태 값은 새로운 컴포넌트가 렌더링 될 때 유지되며, 변경될 때 마다 React는 컴포넌트를 다시 렌더링 하여 새로운 상태를 반영한다.

'useState'의 일반적인 패턴

import React, {useState} from 'react';

function Mycomponent () {
// useState를 사용하여 상태 변수와 설정 함수를 생성
	const [state, setState] = useState(initialValue);
//상태 변수(state)는 현재의 상태 값을 나타내며, 설정 함수(setState)를 통해 상태를 업데이트 할 수 있다

여기서

• 'state' : 상태 변수는 현재 상태 값을 나타내며, 상태를 읽어 올 때 사용됨
• 'initialValue' : 초기값으로 사용할 상태 값을 지정한다. 이 값은 처음 컴포넌트가 렌더링 될 때 사용됨
• 'setState' : 설정 함수는 상태를 업데이트 할 때 사용됨. 이 함수를 호출하면 React는 새로운 상태를 컴포넌트에 적용하고 리렌더링 한다.

'useState'를 사용하여 컴포넌트 상태를 관리하면 상태 변화에 따라 React가 컴포넌트를 업데이트하고 화면을 다시 렌더링함. 이를 통해 동적인 사용자 인터페이스르 구축하고 컴포넌트의 상태를 효과적으로 관리 할 수 있음.

useState를 사용한 다양한 예제를 만들어볼 수 있다.

• 사용자 입력을 받는 양식 만들기 : 'useState'를 사용하여 사용자의 이름, 이메일, 또는 기타 정보를 입력받는 간단한 양식을 만들 수 있다. 이러한 입력 필드의 상태를 관리하고 제출 버튼을 통해 정보를 저장할 수 있음.

• 테마 변경 기능 : 사용자에게 어플리케이션의 테마를 선택하게 하고, 선택한 테마에 따라 어플리케이션의 스타일을 변경 할 수 있다. 예를 들어 다크모드 전환.

• 감정 상태 추적 : 사용자가 현재 감정 상태를 선택하고 해당 감정 상태를 'useState'를 사용하여 추적할 수 있는 감정 추적 앱. 다양한 감정 상태를 선택할 수 있고 텍스트로도 표시해보자

• 온도 변환기 : 섭씨 온도와 화씨 온도를 변환하는 간단한 온도 변환기를 만들어보자. 사용자는 섭씨 온도를 입력하고 변환 버튼을 클릭하면 화씨 온도로 변한되는 것.

• 간단한 게시판 : 'useState'를 활용하여 게시판을 만들 수 있다. 제목과 내용을 입력하고 게시물을 추가 할 수 있으며, 게시물 목록을 표기한다.

다음은 예시로 게시판을 만들어 보았다.