React 기본 개념 정리 (4) State
State(스테이트): 컴포넌트 내부의 데이터를 관리하고 이를 동적으로 변경한다. 기본적으로 React 컴포넌트는 정적인 UI를 렌더링하지만, 사용자의 입력을 받거나, 버튼 클릭으로 값이 바뀌어야 하는 등 동적인 UI로 만드려면 State가 필요하다. 상태가 변경되면 해당 상태를 사용하는 컴포넌트는 자동으로 재렌더링 된다.
(필자는 움직임을 부여한다는 점에서 이전에 배운 자바 스크립트의 React 버전이라고 이해했다)
따라서 이전에 React만 사용하고 있을 때 import React from 'react';
위의 방식처럼 선언했다면 state를 쓸 때에는 import React, { useState } from 'react'; 이렇게 써야한다.
<State 선언 방식>
const [ 변수, set변수] = useState(초기값);
useState는 배열을 반환하고 우리는 구조 분해 할당을 사용해 값을 받아온다
(구조 분해 할당은 배열이난 객체의 값을 쉽게 꺼내서 변수에 할당하는 javascript 문법이다)
State를 사용하여 사용자가 '카운트 증가' 버튼을 누르면 카운트가 하나씩 증가하는 결과물을 만들어보자.
import React, {useState} from 'react';
function Counter(){
const [ count, setCount] = useState(0) // 0으로 count 초기값 세팅
const increment = () =>{
setCount(count+1); }
return (
<div>
<h1> 현재 카운트 : {count} </h1>
<button onClick = {increment}> 카운트 증가 </button>
</div>
)
}
export default Counter;
이번에는 입력창에 내용을 입력하면 해당 내용이 화면에 나타나는 결과물을 만들어보자.
import React, {useState} from 'react';
function TextInput(){
const[text, setText] = useState(' ');
const handleChange = (event) => {
setText (event.target.value);}
return (
<div>
<input type = "text" value = {text} onChange = {handleChange} placeholder = "텍스트 입력"/>
<h2> 입력한 값: {text} </h2>
</div>
)
}
export default TextInput;
