th42500의 TIL

[React.js] React.useState()를 이용하여 자동으로 리렌더링 하기 본문

Frontend/React.js

[React.js] React.useState()를 이용하여 자동으로 리렌더링 하기

th42500 2022. 4. 27. 15:43

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

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

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

 

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

왕초보를 위한 React

nomadcoders.co

지난 시간에는 버튼을 눌렀을 때 컴포넌트를 리렌더링함으로써 React.js에서 가지고 있는 데이터를 업데이트 해주었다.

이번 시간에는 지난 시간의 소스 코드를 이용하여 더 나은 방법의 코드를 이용하여 React.js 내에서 데이터를 보관하고 자동으로 리렌더링을 일으킬 수 있는 방법을 알아보고자 한다.

 

React.useState()를 이용하여 자동으로 리렌더링 하기

 

React.useState()를 이용한 데이터 업데이트

이전의 코드들을 다음과 같이 수정해보자.

<!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 data = React.useState();  // 1단계. 함수 내에서 return문 전에 상수 만들어주기
			console.log(data);  //  [undefined, fuction]
			return (
				<div>
					<h3>
						Total Clicks : 0
					</h3>
					<button>
						Click Me!!
					</button>
				</div>
			);
		}
		ReactDOM.render(<App />, root);
	</script>
</html>

위의 코드를 실행한 결과로는 console창에 undefined와 함수 하나로 이루어진 배열이 data에 담긴 것을 확인할 수 있다.

소스 코드 실행 결과

👉 undefined : data (이전 코드의 counter 변수와 같은 역할)
👉 함수 : data를 바꾸기 위해 사용되는 함수 (이전 코드의 countUp()함수와 같은 역할)

React.useState()의 안에 초기값을 줄 수도 있는데, 만약, 초기값으로 0을 주게 된다면 undefined로 나타났던 data의 초기값이 0으로 바뀌어 console창에 찍힌 것을 확인할 수 있다.

 

즉, React.useState()를 이용하여 이전에 counter 변수를 선언하고 countUp함수를 이용하여 데이터를 업데이트 시켜줬던 긴 코드를 한 줄로 줄일 수 있게 되었다는 것을 알 수 있다.

 

자동 리렌더링 구현하기

그러나 이렇게 배열 형태로 사용하는 것은 매우 불편함으로 우리는 다음과 같이 코드를 수정해주자.

<!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>

1️⃣ 자바스크립트 문법을 이용해서 React.useState(0) 배열의 data값을 counter변수에, 함수를 setCounter함수에 할당

더보기

보통 함수명은 `set+data명`의 형태로 정하여 사용

2️⃣ setCounter를 이용하여 데이터의 값을 업데이트 해주고 리렌더링

     (데이터가 바뀔때마다 컴포넌트를 재생성하교 UI를 refresh)

더보기

setCounter(counter + 1)는 다음의 코드를 실행하는 것과 같은 역할을 한다. (자동으로 리렌더링)

counter = counter + 1;
ReactDOM.render(<App />, root);

 

이번 시간에는 App()함수와 한줄의 코드만으로 <html>코드와 eventLitener()추가, handleClick()을 대체할 수 있음을 알 수 있게 되었다.

 

'Frontend > React.js' 카테고리의 다른 글

[React.js] Unit Converter (단위 변환) 앱 만들기  (0) 2022.04.29
[React.js] State를 Setting 하는 2가지 방법  (0) 2022.04.28
[React.js] JSX를 활용한 React.js 프로그래밍  (0) 2022.04.20
[React.js] vanillaJS VS React.js  (0) 2022.04.20
[JavaScript & React.js] 버튼을 클릭한 횟수 출력하기  (0) 2022.04.19
'Frontend/React.js' Related Articles more
Comments