React state

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 사용하기 : input값에 따라 변하는 메시지

1. useState로 message 관리 : 초기값 설정, 세터함수(setMessage) 선언

const [message, setMessage] = useState('');

2. 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;