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