[React] {useState} 이용하기

useState의 인수로는 사용할 초기값을 넘겨준다. 아무런 값도 없으면 underfined가 나온다. useState의 반환값은 배열이다. 첫번째 원소로 state를 사용할 수 있고, 두 번째 원소인 setState 함수를 사용해 state값을 변경할 수 있다. 

import {useState} from 'react'

const [state, setState] = useState(initialState)

 

아래는 숫자를 증가시키는 기능을 useState를 이용해서 적용하였다. React는 return값을 비교해서 렌더링이 되기 때문에 자동으로 적용되지 않아 useState를 이용해야만 했다. 

 

숫자 증가 기능

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

const App = () => {
	const [number, setNumber] = useState(1);

	return <div>
		<div>number : {number}</div>
		<button onClick={() => setNumber(number+1)}>증가</button>
	</div>
};

ReactDOM.render(<App />, document.getElementById("root"));

숫자 증가 기록

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

const App = () => {
	const [number, setNumber] = useState(1);
	const [recordNumber, setRecordNumber] = useState(null);

	return <div>
		<div>number : {number}</div>
		<div>기록된 숫자 : {recordNumber}</div>
		<button onClick={() => setNumber(number+1)}>증가</button>
		<button className="ml-4" onClick={() => {
				if(number === 0) return
				setNumber(number-1)
			}}>감소</button>
		<button className="ml-4" onClick={() => {
							setRecordNumber(number);
							setNumber(0);
										}}>기록</button>
		<button className="ml-4" onClick={() => setNumber(0)}>
			초기화
		</button>
	</div>
};

ReactDOM.render(<App />, document.getElementById("root"));

 

숫자 증가 기록 배열

JSON.stringify는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다. 

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

const App = () => {
	const [number, setNumber] = useState(1);
	const [recordNums, setRecordNums] = useState([]);
	const saveRecord = () => {
		setNumber(0);
		setRecordNums([...recordNums, number]);
	}
	const clearRecord = () => {
		setNumber(0);
		setRecordNums([]);
	}

	return <div>
		<div>number : {number}</div>
		<div>기록 된 숫자 : {JSON.stringify(recordNums)}</div>
		<button onClick={() => setNumber(number+1)}>증가</button>
		<button className="ml-4" onClick={() => {
				if(number === 0) return
				setNumber(number-1)
			}}>감소</button>
		<button className="ml-4" onClick={saveRecord}>기록</button>
		<button className="ml-4" onClick={clearRecord}>
			초기화
		</button>
	</div>
};

ReactDOM.render(<App />, document.getElementById("root"));

 

https://codepen.io/ycraah/pen/eYwXmqK?editors=0011

useState 훅 이용

 

함수를 묶어서 정리

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

const App = () => {
	const [number, setNumber] = useState(1);
	const [recordNums, setRecordNums] = useState([]);
	const increaseNum = () => {
		setNumber(number + 1);
	}
	const decreaseNum = () => {
		if (number === 0 ) return;
		setNumber(number -1);
	}
	const saveRecord = () => {
		setNumber(0);
		setRecordNums([...recordNums, number]);
	}
	const clearRecord = () => {
		setNumber(0);
		setRecordNums([]);
	}

	return <div>
		<div>number : {number}</div>
		<div>기록 된 숫자 : {JSON.stringify(recordNums)}</div>
		<button onClick={increaseNum}>증가</button>
		<button className="ml-4" onClick={decreaseNum}>감소</button>
		<button className="ml-4" onClick={saveRecord}>기록</button>
		<button className="ml-4" onClick={clearRecord}>
			초기화
		</button>
	</div>
};

ReactDOM.render(<App />, document.getElementById("root"));