useState

React 16.8 이전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었다.
그러나 React 16.8에서 hooks 라는 기능도입으로 인해 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다~!

useState 불러오기

import React, {useState} from "react";

• 리엑트에서 useState라는 함수 불러오는 것.
• useState 사용해서 바뀌는 값 관리할 수 있게 되었다.

import React, {useState} from "react"; 

// Counter 컴포넌트 만들기
function Counter() { 
        const [number, setNumber] = useState(0); 
        const onIncrease = () => {
            setNumber(preNumber => preNumber+1); // 함수형 업데이트
        }

        const onDecrease = () => {
            setNumber(preNumber => preNumber-1);
        }
        return ( 
            <div>
                <h1>{number}</h1>
                <button onClick={onIncrease}>+1</button> {/* 리엑트에서 이벤트 ->  on대문자={실행시킬 함수}  , 함수를 넣는 것이지 함수를 호출하면 안됨. onClick={onIncrease()}이런식으로 넣으면 안됨!!, 클릭 됐을 때 함수를 호출하고 싶은거지 렌더링 됐을 때 함수를 호출하고 싶은 것이 아니므로. 주의하기 ! */}
                <button onClick={onDecrease}>-1</button>
            </div>

        )

    
}
export default Counter;

코드 파헤치기

📍

const [number, setNumber] = useState(0); 

• 기본값을 함수의 파라미터로 넣어줌.
  -> 현재는 0. 화면상에 0으로 출력
• useState(0)는 배열을 반환하게 된다.
• 첫번째 원소( number ) : 현재상태를 나타낸다.
• 두번째 원소( setNumber ) : 상태를 바꾸는 함수. 현재 상태 업그레이드 하는 함수.

📍

// A
const [number, setNumber] = useState(0);  

// B
const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

A 코드는 B 코드로 만들어져야하는데, 구조분해(배열비구조할당)를 통해 표현한 것.

📍 setNumber

방법 (1) : 다음 상태 넣기.

setNumber(number+1)

• setNumber 함수에다가 새로운 상태 (number+1) 넣어서 호출해주면 값이 바뀐다.
  (다음 업데이트 하고 싶은 값 넣어줌.)

방법 (2) : 함수형 업데이트 (함수를 넣어주기).

setNumber(preNumber => preNumber+1)

• 어떻게 업데이트할지에 대한 함수를 넣어 주기.
  현재상태를 가져와서( preNumber ) 이런식으로( preNumber+1 ) 업데이트 하겠다.
  (이름은 상관없음, n=>n+1 해도됨)
• preNumber => preNumber+1 를 업데이트 함수라고 부른다.
• 최적화와 관련 있다!

📍

<h1>{number}</h1>

• 바뀐 값을 h1태그에서 보여주도록 설정 {number}

📍

button onClick={onIncrease}

• 버튼에서 클릭 이벤트 발생하게 되면 함수 연결해서 호출
  -> onIncrease
• 리엑트에서 이벤트는 on대문자={실행시킬 함수}
  함수를 넣는 것이지 함수를 호출하면 안된다.
  ->onClick={onIncrease()}이런식으로 호출해서 넣으면 안됨!!
  -> 클릭 됐을 때 함수를 호출하고 싶은 것이지, 렌더링 됐을 때 함수를 호출하고 싶은 것이 아니므로 주의하기.

학습 : 벨로퍼트와 함께 하는 모던 리엑트