Counter.js
import React, { useState } from "react";
function Counter() {
const [number, setNumber] = useState(0);
//number라는 상태값의 기본값을 0
//setNumber는 (0)이 상태를 바꿔주는 함수(업데이트)
//useState호출시 배열을 반환하게 되는데 첫번째 원소를 number라는 이름으로 추출하고, 두번째 넘버를 setNumber라는 이름으로 추출
const onIncrease = () => {
setNumber(prevNumber => prevNumber + 1);
}
const onDecrease = () => {
setNumber(prevNumber => prevNumber - 1);
}
return (
<div>
<h1>{number}</h1>
<button onClick={onIncrease}>+1</button>
<button onClick={onDecrease}>-1</button>
</div>
)
}
export default Counter;리액트 패키지에서 useState라는 함수를 불러와준다.
import React, { useState } from "react";useState를 사용 할 때는 상태의 기본값을 파라미터로 넣어서 호출해준다.
useState호출시 배열을 반환하게 되는데 첫번째 원소는 현재 상태, 두번째 원소는 Setter함수이다.
const [number, setNumber] = useState(0); 배열 비구조화 할당을 통하여 각 원소를 추출
const onIncrease = () => {
setNumber(prevNumber => prevNumber + 1);
}
const onDecrease = () => {
setNumber(prevNumber => prevNumber - 1);
}Setter함수는 파라미터로 전달 받은 값을 최신 상태로 설정
<h1>{number}</h1>함수형 업데이트
- 위에는 Setter 함수를 사용 할 때, 업데이트 하고 싶은 새로운 값을 파라미터로 넣어주고 있는데, 그 대신 기존 값을 어떻게 업데이트 할 지에 대한 함수를 등록하는 방식으로도 값을 업데이트 할 수 있다.
- 함수형 업데이트는 주로 나중에 컴포넌트를 최적화 할 때 사용
const onIncrease = () => {
setNumber(prevNumber => prevNumber + 1);
}
const onDecrease = () => {
setNumber(prevNumber => prevNumber - 1);
}**prevNumber은 선언한적이 없는데 어디서 나타난 것일까?**
useState함수를 개발한 개발자가 정한 것
const [state, setState] = useState();이렇게 했을 때, setState란 함수에 파라미터로 함수를 넘겨주면 이전 값을 넣어주는 걸로 개발이 된 것, 콜백함수 개념 알고 있어야 이해가 쉽다.
prevNumber => prevNumber + 1이거 자체는 우리가 임의로 정의한 함수라서 파라미터명을 뭘로 쓰던 상관 없다. 이해하기 쉽게 setState 내부를 쉽게생각하면 아래와 같다.(실제로 그런건 아님)
let previosValue = 0;
function setState(callback) {
previosValue = callback(previosValue);
}여기서 callback이 prevNumber => prevNumber + 1 이라고 생각하면 쉽다.
이 글은 패스트캠퍼스 '프론트엔드(React)올인원패키지Online'을 수강하며 정리한 노트입니다.
https://fastcampus.co.kr/search?keyword=%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C
개발짜🏃♀️