Frontend/React.js

[React.js] State를 Setting 하는 2가지 방법

th42500 2022. 4. 28. 00:23

해당 내용은 노마드코더의 ReactJS로 영화 웹 서비스 만들기라는 강의를 듣고 작성한 내용임을 미리 알려드립니다.

자세한 내용은 노마드코더 홈페이지의 강의를 참고해주세요.

https://nomadcoders.co/react-for-beginners/lobby

 

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

왕초보를 위한 React

nomadcoders.co

 

 

State를 Setting하는 방법 (2가지)

 

1️⃣ 직접 값을 설정하는 방법

해당 방법은 이전에 작성했던 코드를 가져와 확인해보자.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="root"></div>
</body>
	<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
	<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<script type="text/babel">
		const root = document.getElementById("root");

		function App() {
			const [counter, setCounter] = React.useState(0);  // 1단계. 함수 내에서 return문 전에 상수 만들어주기
			const onClick = () => {
				setCounter(counter + 1);
			};
			return (
				<div>
					<h3>
						Total Clicks : {counter}
					</h3>
					<button onClick={onClick}>
						Click Me!!
					</button>
				</div>
			);
		}
		ReactDOM.render(<App />, root);
	</script>
</html>

위와 같이 값을 직접 설정할 경우 다른 어떤 곳에서 couter 변수를 업데이트 해주게되면 원하는 값을 얻지 못할 수 있다.

 

2️⃣ 함수를 전달하기

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="root"></div>
</body>
	<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
	<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<script type="text/babel">
		const root = document.getElementById("root");

		function App() {
			const [counter, setCounter] = React.useState(0);  // 1단계. 함수 내에서 return문 전에 상수 만들어주기
			const onClick = () => {
				setCounter((current) => current + 1);
			};
			return (
				<div>
					<h3>
						Total Clicks : {counter}
					</h3>
					<button onClick={onClick}>
						Click Me!!
					</button>
				</div>
			);
		}
		ReactDOM.render(<App />, root);
	</script>
</html>

해당 코드와 같이 함수를 이용하여 값을 업데이트 한다면 예산치못한 업데이트가 어디선가 일어났다고 해도, 혼동을 주는 것을 방지할 수 있다.

 

즉, 2️⃣번과 같이 코드를 작성한다면 현재 state를 바탕으로 다음 state를 계산할 때 조금 더 안전한 방법이라고 할 수 있다.