[250127 월요일]
리액트라는 프론트엔드 라이브러리를 접한지 이제 일주일정되 되었는데...강의명이 숙련이라니요??!?!?!🫠
새로운 리액트 훅이 등장해서 정리를 해놔야 진도를 잘 따라갈 수 있겠다. 아직도 너무 헷갈리는 리액트🥲
📌 useState
useState는 컴포넌트 내에서 상태(state)를 관리하는 훅(Hook).- 상태(state)는 컴포넌트가 렌더링하는 데이터인데, 이 값(state)이 바뀌면 컴포넌트가 다시 렌더링된다.
1. useState 기본 사용법
const [state, setState] = useState(initialState);state: 현재 상태 값setState: 상태를 변경할 수 있는 함수initialState: 상태의 초기값 (문자, 숫자, 배열, 객체 등)
✅ 예시
const [count, setCount] = useState(0); // count는 0으로 초기화2. 상태가 객체일 경우 불변성 유지
- 상태가 객체나 배열인 경우(참조형 데이터), 불변성(immutability)을 유지해야 한다.
- 객체나 배열의 값을 직접 변경하는 것은 리액트의 렌더링과 상태 업데이트 로직을 예상하지 못하게 만들 수 있기 때문에 새로운 객체나 배열을 만들어서 상태를 업데이트해준다.
✅ 예시
const [user, setUser] = useState({ name: 'John', age: 30 });
//
// 잘못된 예 (불변성 위반)
setUser(user => user.name = 'Jane'); // 불변성 위반, 직접 수정
//
// 올바른 예 (불변성 지킴)
setUser(user => ({ ...user, name: 'Jane' })); // 새로운 객체로 상태 업데이트3. setState 업데이트 방식
setState로 상태를 업데이트하는 방식은 크게 일반 업데이트 방식과 함수형 업데이트 방식으로 나눌 수 있다.
3-1. 일반적인 상태 업데이트 방식
- 상태를 바로 수정하는 방식으로, 이전 상태 값을 고려하지 않고 새로운 값을 설정하는 방식.
- 리액트는 이 업데이트를 배치(batch:일괄) 처리하므로, 여러
setState호출이 동시에 일어나도 동일 명령으로 판단하고 마지막 명령 한 번만 렌더링된다.setState(newValue)
✅ 예시
const [count, setCount] = useState(0);
// 일반적인 업데이트 방식
// 현재 count 값에 1을 더해 새로운 값을 설정
// props -> count, setCount
<button onClick={() => {
setCount(count + 1)
setCount(count + 1)
setCount(count + 1)
}}
>
버튼
</button>3.2. 함수형 상태 업데이트 방식
- 상태를 업데이트할 때 이전 상태 값을 기반으로 새로운 상태 값을 설정하는 방식.
- 여러 개의 상태 업데이트가 있을 때 이전 상태를 기반으로 처리할 때 사용할 수 있다.(비동기 처리방식)
setState(prev => newValue)
✅ 예시
const [count, setCount] = useState(0);
// 함수형 업데이트 방식
// 이전 상태 값(prev)을 사용해 새로운 상태 계산
// 함수 로직은 순차 처리하여 아래 코드의 경우 총 3회 반영됨
// props -> setCount
<button onClick={() => {
setCount(prev => prev + 1)
setCount(prev => prev + 1)
setCount(prev => prev + 1)
}}
>
버튼
</button>
이 방법을 사용하면, setState가 여러 번 호출될 때 각 호출이 이전 상태를 정확히 반영하게 된다.
[250131] 금요일 추가
4. useState 비동기적 작동방식
- 리액트는 함수 컴포넌트로 함수가 실행되면 리렌더링이 일어난다.
- 함수의 선언, 함수의 실행을 구분 한다면 조금은 이해가 쉬워진다.
- 핸들러 함수를 선언하는 도중에 console.log()를 찍어본다면 함수가 실행 중이므로 해당 함수의 결과를 알 수가 없다.
- 1st count & 2nd count 는 각각 1일 것이라 예상했지만, 콘솔에서 확인 되는 값은 0이다. - 해당 핸들러 함수가 실행이 된 후에 console.log()를 찍어 봐야 결과값을 알 수 있는점.
- 3rd count 지점에서는 해당 함수가 완료 된 후 이기 때문에 배치처리의 결과로 콘솔에서는 1이 확인된다. - 해당 컴포넌트의 retrun()부분이 화면에 리렌더링될때 보여지는 부분이기 때문에 선언중인 시점과 차이가 날 수 밖에 없다.
✅ 예시
App.jsx
import React, { useState } from "react";
function App () {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
console.log("1st count:", count); // 1st count: 0
setCount(count + 1);
console.log("2nd count:", count); // 2nd count: 0
};
console.log("3rd count", count); // 3rd count: 1
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>증가</button>
</div>
);
}
export default App;함수 내부, 외부 (리액트 렌더링 전, 후)console값 비교
최초 렌더링
증가 버튼 1회 클릭후 리렌더링
증가 버튼 2번째 클릭후 리렌더링
one setp