React에서 state를 사용하는 이유?, useState() 사용법

 

프로젝트 하면서 useState()를 정말 많이 썼는데...

문득 드는 생각

아 let 대신 왜 state를 쓰는거였지?

내 머리는 너무나 나빠서 ~ 이유조차 까먹었어~

저번에 정리한 포스팅 보충 설명할 겸,

이번에 확실히 개념도 정리할 겸 포스팅 합니다. ㅎ

▶ useState란?

React Hooks에서 제공하는 함수입니다.

리액트에서 state란, 컴포넌트에서 변경될 수 있는 값을 말합니다.

함수형 컴포넌트에서 state를 변경하기 위해 사용하는 것이 useState() 함수 입니다.

useState는 2개의 인자를 받을 수 있습니다.

▶ 사용법

useState(a, b)

a => 상태 값이 저장되는 자리

b => 상태 값을 변경하는 함수의 자리

 

ES6에 새로 추가된 비구조화 할당을 사용하여 더욱 쉽게 이를 활용할 수 있습니다.

const [title, setTitle] = useState('성동구 맛집');

여기서 title은 '성동구 맛집'을 저장하고 있고,setTitle는 title의 값을 변경하는 함수입니다.setTitle과 같은 상태 값을 변경하는 함수는 주로 input 태그에 글자를 입력하거나, 버튼을 클릭하는 등 특정 이벤트가 발생할 때 사용합니다.

 

▶ 변수(let, const)로 값을 다루지 않고, state를 사용하는 이유는?

let title = '성동구 맛집';

성동구 맛집이란 값이 저장되어 있는 title을 글 제목으로 쓰고 싶을 때,title의 값을 직접 '성북구 맛집'으로 변경하면,일반 변수로 정의한 값의 경우 사용자가 새로고침을 꼭 눌러줘야 값이 변경됩니다.

 

반면에, state는 컴포넌트의 값이 변경될 때, HTML이 자동으로 재렌더링 됩니다.

또한 state를 사용하면 같은 컴포넌트를 여러번 사용할 경우, 동일한 컴포넌트에서도 state를 각각 관리할 수 있게 됩니다!

 

사용자 측면에서는 새로고침을 누르지 않아도 자동으로 변경되는 state가 더 좋겠죠?또한 state는 위의 예시에서 든 setTitle과 같은 상태 변경 함수를 통해서 값을 바꿀 수 있기 때문에해커가 함부로 데이터를 변경하기가 힘듭니다.

 

state를 이래서 사용하는 거군요!

 

자주 바뀌거나 중요한 데이터는

변수 대신 state로 저장해서 쓰세요! 

---

많은 도움을 주신 코딩애플, 코딩앙마님 감사합니다...!

***참고 영상

https://www.youtube.com/watch?v=Qb8Oiy8i9IY&t=3s 

(125) React JS #7 state, useState - 초보자를 위한 리액트 강좌 - YouTube

도움이 되셨다면, 공감 버튼 한번씩만 눌러주세요! 감사합니다. 😄 오늘도 즐거운 코딩하세요!