$$config title: [리액트] React Hooks, useState()에 대한 정리 keywords: - IT - React $$ # React 기본 공식 - const [state, setState] = useState(initiailState) -> 배열의 첫 번째 요소는 <상태 값 저장 변수>(이하 state), 두 번째 요소는 <상태 값 갱신 함수>(이하 setState)입니다. # React가 나오게된 배경 - React Hooks가 나오기전에는 컴포넌트의 상태 관리를 하기 위해서는 클래스 기반으로 컴포넌트를 작성해야 했다. 클래스 컴포넌트의 this.state 에 name, surname 을 저장해두고 input에 사용자가 입력 할 때마다 값이 갱신이 되면서 화면에 반영된다. 하지만 클래스 기반의 컴포넌트는 함수를 항상 bind 해주어야 하고, 상태나 상태를 관리하는 함수를 사용할 때에는 this, this.state 를 써서 접근해야 하는 등 간단한 컴포넌트를 만드는 데에도 귀찮고 불편한 점이 많았다. 하지만 리액트 16.8 버전부터 Hooks가 도입되면서 함수형 컴포넌트에서도 상태 관리를 할 수 있게 됐다. # 예제 ```js import React from "react"; class Hello extends React.Component { constructor(props) { super(props); this.state = { name: "Mary", surname: "Poppins" }; this.handleNameChange = this.handleNameChange.bind(this); this.handleSurnameChange = this.handleSurnameChange.bind(this); } handleNameChange(e) { this.setState({ name: e.target.value }); } handleSurnameChange(e) { this.setState({ surname: e.target.value }); } render() { return (

Name :

Surname :

); } } export default Hello; ``` # React는 함수 기반 상태 관리이다. - React Hooks에서 제공하는 useState() 함수를 사용해서 함수형 컴포넌트에서도 상태 관리를 할 수 있다. useState() 의 기본적인 모습은 아래와 같다. const [value, setValue] = useState(initialValue); value 는 상태 값을 저장하는 변수이고, setValue 는 상태 값을 변경하는 함수이다. useState 의 인자로 초기값을 넘겨주면서 사용한다. useState 는 배열을 반환하고 배열 구조 분해 문법으로 작성되었는데, 내부적으로는 다음과 같이 동작한다. 기존 예제를 useState로 변환하면 아래와 같이 된다. ```js import React, { useState } from "react"; const Hello = () => { const [name, setName] = useState("Mary"); const [surname, setSurname] = useState("Poppins"); const handleNameChange = (e) => { setName(e.target.value); }; const handleSurnameChange = (e) => { setSurname(e.target.value); }; return (

Name :

Surname :

); }; export default Hello; ``` - state를 가져올 때에는 name, surname에 바로 접근할 수 있다. state를 갱신할 때에도 this를 사용하지 않고 바로 호출이 가능하다.