- State
- Hooks
State
- 지난 React기초(1) 포스팅에서 props를 사용하여 컴포넌트에 데이터를 전달하는 방법을 배웠다.
- 많은 웹 앱들은 유저의 상호작용(버튼 클릭, 양식 제출 등)후 데이터를 변경하기 위해 컴포넌트가 필요하다.
- 하지만 Props는 변하지 않는다.
- React는 state 라는 기능을 사용하여 컴포넌트가 데이터를 관리하고 변경할 수 있다.
State 변경
- React는 State 수정하는 데 사용할 수 있는 setState() 메서드를 제공한다.
- State 직접 수정해서는 안된다.
- setState가 호출되면 React는 영향받는 컴포넌트를 새로운 상태로 자동으로 다시 렌더링한다.
- 일반적으로 State 변경은 이벤트 핸들러에서 발생한다.
- setState 메서드를 사용하여 State가 변경되면 React는 알림을 받고 업데이트 된 State로 컴포넌트를 즉시 다시 렌더링한다.
[ Props, State 정리 ]
- props 를 사용하여 데이터를 컴포넌트에 전달한다.
- 컴포넌트는 State를 사용하여 데이터를 관리한다.
- props은 읽기 전용이라서 수정할 수 없다.
- State를는 setState() 메서드를 사용하여 컴포넌트에서 수정할 수 있다.
- setState()를 통해 영향받는 컴포넌트를 새로운 상태로 자동으로 다시 렌더링한다.
state가 있는 컴포넌트를 stateful이라고 하고, state를 사용하지 않는 컴포넌트를 stateless라고한다.
- stateful : client와 server의 동작(상태정보를 저장하는 형태, 세션 상태에 기반하여 server의 응답이 달라짐)
- stateless : client와 server의 동작(상태정보를 저장하지 않는 형태, server의 응답이 client와의 세션 상태와 독립적)
Hooks
- 이전의 React에서는 class 컴포넌트에서만 state를 사용할 수 있었다.
- Hook이 React 버전 16.8에 새로 추가되면서 Hook을 이용하여 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있게 되었다.
- Hooks라는 새로운 기능이 도입되어 컴포넌트 내부에서 state를 사용할 수 있게되었다. 먼저 useState Hooks를 가져와야한다.
- Hook은 useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해준다.
- 대부분 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트로 바꿔서 사용해왔다고하는데 하지만 이제 함수 컴포넌트 안에서 Hook을 이용하여 state를 사용할 수 있다고한다.
import React, { useState } from 'react';
function Example() {
// 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
const [count, setCount] = useState(0);
- count라고 부르는 state 변수를 선언하고 0으로 초기화
- React는 해당 변수를 리렌더링할 때 기억하고, 가장 최근에 갱신된 값을 제공
- count 변수의 값을 갱신하려면 setCount를 호출
- useState를 왜 호출하는걸까?
- “state 변수”를 선언
- 위에 선언한 변수는 count라고 부르지만 banana처럼 아무 이름으로 지어도 된다.
- useState는 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같다.
- 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않는다.
- useState의 인자로 무엇을 넘겨주어야 할까?
- useState()는 Hook의 인자로 넘겨주는 값은 state의 초기 값
- 함수 컴포넌트의 state는 클래스와 달리 객체일 필요는 없고, 숫자 타입과 문자 타입을 가질 수 있다.
- 위의 예시는 사용자가 버튼을 얼마나 많이 클릭했는지 알기를 원하므로 0을 해당 state의 초기 값으로 선언(2개의 다른 변수를 저장하기를 원한다면 useState()를 두 번 호출해야한다.)
- useState는 무엇을 반환할까?
- state 변수(위의 예 : count), 해당 변수를 갱신할 수 있는 함수(위의 예 : setCount ) 이 두 가지 쌍을 반환
- 이것이 바로 const [count, setCount] = useState()라고 쓰는 이유
- 클래스 컴포넌트의 this.state.count와 this.setState와 유사하다.
- state 변수(위의 예 : count), 해당 변수를 갱신할 수 있는 함수(위의 예 : setCount ) 이 두 가지 쌍을 반환
- 아래의 예시에서는 name과 setName 함수를 생성
- 대괄호 구문을 구조분해라고 함
- 현재 상태 값에 name 변수를 할당하고 상태를 변경할 수 있는 함수에 Name을 설정
- 변수들의 이름은 무엇이든 원하는 대로 지정할 수 있음
- name 변수의 초기 값으로 “David”를 전달하여 State()를 사용
const Hello = () => {
const [name, setName] = useState("David");
return <h1>Hello {name}.</h1>;
}
- 버튼을 클릭했을때 숫자가 1씩 증가
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './style.css';
const Counter = () => {
const [counter, setCounter] = useState(0);
const increment = () => {
setCounter(counter+1);
}
return <div>
<p>{counter}</p>
<button onClick={increment}>Increment</button>
</div>;
}
const el = <Counter />;
ReactDOM.render(
el,
document.getElementById('root')
);