2024-03-27 (73일차) - setState

린·2024년 3월 27일

[산대특] 프롬프트AI & OpenAPI & 공공데이터를 활용한 웹앱개발자 양성과정

목록 보기

66/86

📅 2024-03-27, 73일차

TODO

[강의 다시보기]

리액트(React), TodoListItem 수정 UI 레이아웃
리액트(React), TodoListItem 수정모드에서 입력창 보이도록
리액트(React), TodoListItem 수정취소
리액트(React), TodoListItem 수정취소 후 다시 수정모드 진입시 value 값 유지
리액트(React), TodoListItem 수정기능 구현

setState

setState는 state 값을 변경시켜주는 함수:
const [state, setState] = useState(초기값)]
state를 직접 변경하지 않고 setState를 사용하는 이유:

state는 immutable(불변성)을 유지해야함

state를 직접 수정하게 되면 리액트가 render 함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있음

setState 함수를 사용하는 2가지 방법

첫번째 방법

현재 상태를 직접 참조하여 새 상태를 설정함
이 방식의 문제점은 상태 업데이트가 비동기적으로 이루어짐

두번째 방법

상태 업데이트를 위한 함수를 사용하여 현재 상태의 가장 최신 값을 기반으로 새 상태를 계산하고 최신 상태를 기반으로 실행되도록 보장함
상태 업데이트가 연속적으로 발생하는 경우에 더욱 안정적

// 첫번째 방법
const Num1Button = ({ num, setNum }) => {
	const onClick = () => {
		setNum(num + 1);
		setNum(num + 1);
	};

	return <button onClick={onClick}>증가</button>;
};

// 두번째 방법
const Num2Button = ({ setNum }) => {
	const onClick = () => {
		setNum((num) => num + 1);
		setNum((num) => num + 1);
	};

	return <button onClick={onClick}>증가</button>;
};

// 두 방법을 실행해보자
const App = () => {
	const [num1, setNum1] = useState(0);
	const [num2, setNum2] = useState(0);

	return (
		<>
			num1 : {num1} <Num1Button num={num1} setNum={setNum1} />
			<hr />
			num2 : {num2} <Num2Button setNum={setNum2} />
		</>
	);
};