[React] state, UseState 알아보기
안녕하세요. 이번 글에는 리액트에서 사용률이 100%로 매우 중요한 개념임
state에 대해 알아보겠습니다.
State란?
컴포넌트 안에서 데이터를 보관하는 박스같은 역할을 합니다. UseState라고 불리는 문법을 이용하고,
보통 컴포넌트 내부에서 유동적으로 바뀔 수 있는 값을 state라고 부르며 개발 상황에 맞춰 이 값을 변경하여 저장해놓고 필요할때 꺼내와서 쓰는 개념이라고 보시면 됩니다.
UseState를 이용하여 State값 관리해보기
//useState 훅 임포트 해줘야합니다
import { useState } from "react";
function App() {
//value라는 변수에 state값 담고, 기본값은 공백으로 설정하기
//setValue로 value 상태값을 컨트롤 하는 겁니다
const [value, setValue] = useState("");
return (
<div>
<input
onChange={(e) => {
//입력할때마다 state값 담기
setValue(e.target.value);
}}
placeholder="담고 싶은 값 입력해보기"
/>
//담은 state값 출력하기
<div>{value}</div>
</div>
);
}
이런식으로 요소안에 특정 이벤트를 주고 그 이벤트를 행하면 state값에 변경을 주는 것입니다.
참고자료
https://reactjs.org/docs/hooks-state.html
Author And Source
이 문제에 관하여([React] state, UseState 알아보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hoon_dev/리액트-시작하기state란-3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)