안녕하세요! 이제는 코딩테스트 리뷰가 아닌 리액트에 대해 설명을 담을 때가 되어서 기본 중에 기본이라고 할 수 있는 useState() 에 대해 알아보도록 하겠습니다..!
그럼 바로 가시죠!
먼저 리액트란?
자바스크립트에서 변수를 이용하는 것 처럼 리액트에서는 useState() 를 통해 변수를 활용합니다 변수의 값을 그대로 사용할 수 있고 추가적으로 사용할 수 도 있습니다
예시와 함께
설명을 위해 예시 코드는 쥐피티씨의 코드를 가져오겠습니다
import React, { useState } from 'react';
function Counter() {
// useState를 사용하여 count라는 상태를 생성하고 초기값을 0으로 설정합니다.
const [count, setCount] = useState(0);
// 버튼 클릭 시 count 상태를 1씩 증가시키는 함수
const increaseCount = () => {
setCount(count + 1);
};
// 버튼 클릭 시 count 상태를 1씩 감소시키는 함수
const decreaseCount = () => {
setCount(count - 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increaseCount}>Increase</button>
<button onClick={decreaseCount}>Decrease</button>
</div>
);
}
export default Counter;
예시 코드를 가져왔습니다
const [count, setCount] = useState(0);
해당 코드가 리액트에서 변수 선언이라고 할 수 있습니다
현재 변수의 기본 값은 0으로 선언이 되어 있고 변수 명은 count로 보시면 될 것 같습니다
const increaseCount = () => { setCount(count + 1); };
해당 코드는 변수를 이용해 또 다른 변수를 만들어준 것인데요
여기서는 클릭시 count 상태에 1씩 더해줄 것이기 때문에
count를 사용하는 것이 아닌 setCount를 사용해줍니다
그냥 단순하게 변수의 값을 선언해줄 것이였다면 count를 사용해도 되겠죠?
useState() 는 여러개 선언이 가능하며 사용이 가능합니다
제가 괜히 어렵게 꼬아서 생각을 하고 고민을 한 것 같아서 어렵게 느껴졌던 것 같습니다!
useState()의 장점
- 함수형 컴포넌트에서 상태 관리가 간소화 됩니다
- 하나의 컴포넌트에서 여러 개의 상태 변수를 사용할 수 있습니다
- 랜더링에 많은 장점들을 확보할 수 있습니다
네 그러면 오늘은 짧게 useState()에 대해 알아보았습니다
리액트에 대해 공부하고 프로젝트도 진행하는데 아직 useState() 에 대해 모르다니... 현타가 흐르고 또 흐르더라구요... 눈물과 함께...
그래도 뭐 해볼 수 있을 때 까지는 해봐야죠..
이제 몸도 좋아지고 하니깐 이제는 또 달리면서 공부에 집중해 봐야겠습니다..
다음은 꼭 props를 이해해서 꼭 벨로그로 props 개념에 대해 찾아올 수 있도록 노력하겠습니다..
그러면 우리 또 힘내고 행복하자구요..!!
