React hooks useState의 사용

리액트 강의 복습하며

 

리액트 hooks의 useState에 대해 알아보겠습니다.
페이스북의 좋아요 버튼처럼 엄지버튼을 누르면 숫자 1을 올리는 걸 해보겠습니다.

let [like, setLike] = useState(0);
like는 0으로 초기화 해준 것이며 setLike는 like를 변경해줄 때 사용할 것입니다.

 

import React, { useState } from 'react';

function App() {
	let titel = '강남 맛집 추천';
	let [like, setLike] = useState(0);
    
	return (
		<>
			<div className="App">
				<div className="list">
					<h3> { title } <span onClick={ () => {setLike(like + 1)} }>👍</span> {like} </h3>
					<hr/>
				</div>
			</div>
		</>
	)
}

export default App;

 

 

onClick={} 안에는 반드시 함수가 들어가며 위의 코드처럼 Arrow Function을 적어도 됩니다.
setLike로 like의 값을 변경시킬 수 있습니다. 위의 코드처럼 숫자뿐 아니라 문자 형식, 불리안 값도 넣어서 바꿔 줄 수 있습니다.