State란?
- state는 컴포넌트에 대한 데이터 또는 정보를 포함하는 데 쓰이는 리액트 내장 객체다.
- 포넌트 상태는 시간이 지남에 따라 변경될 수 있다.
- 변경될 때마다 컴포넌트가 다시 렌더링된다.
- state 변경은 사용자 작업 또는 시스템 생성 이벤트에 대한 응답으로 발생할 수 있으며 이 변경은 컴포넌트의 동작, 렌더링 방법을 결정한다.
State 특징
- 사용자 작업 또는 네트워크 변경에 따라 state를 수정할 수 있다.
- 객체의 상태가 바뀔 때마다 리액트는 컴포넌트를 브라우저에 다시 렌더링한다.
- state 객체는 생성자에서 초기화된다.
- state 객체는 여러 속성을 저장할 수 있다.
- this.setState()는 state 객체의 값을 저장하는 데 쓰인다.
- setState()는 새 state와 이전 state 사이의 얕은 병합을 수행한다.
반드시 setState 로 데이터를 변경하기
- state 값을 변경할 때는 반드시 setState를 사용하여 변경해야한다.
- setState를 사용한 경우, state값이 변경되면 useState가 변경을 감지하고, 자식 컴포넌트들까지 리렌더링이 발생한다.
- 직접 state를 수정하게 되면 리액트가 render 함수를 호출하지 않아 변경이 일어나도 렌더링이 일어나지 않을 수 있다.
useState 형태
<기본 예시>
const [ state, setState ] = useState(initialState)
const [ 상태, 세터함수 ] = useState(초기값)
- useState 함수를 호출하면 배열 [state, setState] 이 리턴된다.
- 배열의 첫번째 요소는 현재 상태(state)이고, 두번째 요소는 상태를 바꾸어주는 setState 함수가 리턴된다.
- useState 함수 인자에는 상태의 초기값을 넣어 주는 것은 생략이 가능하다.
- useState로 message 관리 : 초기값 설정, 세터함수(setMessage) 선언
const [message, setMessage] = useState('');
- event 로 발생한 value 값을 Message에 대입해서 state를 갱신하기
setMessage(e.target.value);
React Hooks란?
React Hook은 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리로 보면된다.
Hook규칙
01. 최상위에서만 Hook을 호출해야한다.
- 반복문이나 조건문 훅은 중첩된 함수 내에서 Hook을 호출하면 안된다.
- React Hook은 호출되는 순서에 의존하기 때문에 조건문이나 반복문 안에서 실행하게 될 경우 해당 부분을 던너 뛰는 일이 발생할 수도 있기 때문에 순서가 꼬여 버그가 발생할 수 있다.
- 규칙에따라 useState와 useEffect가 여러번 호출되는 경우에도 Hook의 상태를 올바르게 유지할 수 있게 된다.
02. 리액트 함수 내에서만 Hook을 호출해야 한다.
- Hook은 일반적인 js 함수에서는 호출하면 안된다.
- 함수형 컴포넌트나 custom hook에서는 호출 가능하다.
useState Hook
useState는 상태를 관리하는 Hook으로 다음과 같은 특징을 가진다.
- 함수형 컴포넌트 안에 stat를 추가하여 사용한다.
- 현재 상태를 나타내는 state값과 이 상태를 변경하는 setState값을 한 쌍으로 제공한다.
- state는 초기밧을 설정할 수 있으며, 초긱밧은 첫 렌더링 때 한번 사용된다.
- state는 객체일 필요 없이 문자열, 숫자, boolean, 배열, null, 객체 등의 여러가지 다양한 값을 넣을수 있다.
<예시>
import React, { useState } from "react";
function Example() {
// "count"라는 새 상태 변수를 선언한다.
const [count, setCount] = useState(0);
return(
<div>
<P>You clicked {count} times</P>
// 버튼을 클릭할 때마다 기존의 state 기본값인 0에 1이 더해진다.
<button onClick={() => setCount (count+ 1)}>Click me
</button>
</div>
);
}
export default MyComponent;