[React] - Hooks (useState)

리액트 Hooks

리액트 프로젝트에서 'use'로 시작하는 모든 함수.

일반 함수이지만 리액트 컴포넌트 함수 or 다른 리액트 Hook 안에서 호출되어야 함.

컴포넌트 함수 안에서, 최상위에서 바로 호출.

다른 코드 안(내부 함수 안)에서 중첩 X.

if문, loop X.

 

• 리액트에서 처리되는 변수를 등록하는 것.
• 리액트가 제공하는 함수의 도움을 받아 업데이트 됨.
• 리액트에게 데이터가 변한 것을 알려주면 리액트가 UI를 업데이트.

=> 이 특별한 변수들은

리액트 라이브러리에서 불러와야 하는 특별한 함수의 도움으로 생성

 

useState

import { useState } from 'react';

 

인수를 받아들이는데 기본적으로 컴포넌트가 처음 렌더링될 ,때 리액트가 저장하고 사용하길 원하는 기본값.

반환되는 값(배열) -> 변수, 상수 저장 가능.

 

useState 반환되는 요소 

• 배열 구조 분해 -> 2개 요소, 별도 상수에 저장.
• 반환된 배열에서 추출하는 요소의 이름 자유롭게 저장. (방식은 일반적인 명명규칙)

const [ name, setName ] = useState('hello my name is kitty');

 

1. 배열 구조 분해: useState는 두 개의 요소를 가진 배열을 반환.

2. 첫 번째 요소 (상태 값): name은 현재 상태, 초기값은 'hello my name is kitty'.

3. 두 번째 요소 (업데이트 함수): setName은 상태를 업데이트하는 함수. 이 함수를 호출하면 React는 컴포넌트를 다시 렌더링하여 새로운 상태 값을 반영.