State는 상태라는 뜻으로, 어떤 사물의 형편이나 모양을 의미합니다. 전구의 On/Off 상태와 유사하게 리액트의 컴포넌트도 State(상태)따라 다른 결과를 렌더링 할 수 있습니다. 리액트에서 사용되는 State에 대해 좀 더 이해하면서, 사용하는 방법도 함께 정리해보았습니다.
컴포넌트와 State(상태)
React의 컴포넌트는 사용자의 행위나 시간 변동에 따라 값이 변하는 동적인 컴포넌트로 만들 수 도 있습니다. 이를 위해 사용되는 기능이 바로 React의 State 입니다.
State의 기본 사용법
State를 사용하려면 먼저 useState라는 함수를 통해 State를 생성해주어야 하는데요.
아래와 같이 생성해주면 되고, 각각은 [ State 변수, set 함수 ] = 생성자(초기값) 을 의미합니다.
const [light, setLight] = useState('off');
// [ State 변수, set 함수 ] = 생성자(초기값)
다시 한번 풀어서 설명하면,
light는 State 변수로, 현재 상태 값을 저장하고 있는 변수 입니다.
setLight는 set 함수로, State 변수의 값을 변경하는 함수입니다.
useState를 호출 할 때, ()안에 특정값을 넣어주게 되면, 해당값이 State변수의 초깃값이 됩니다. (현재 light의 값은 'off')
State로 간단한 Counter 구현해보기
먼저 useState import를 해준 뒤, Body 컴포넌트에서 useState 함수로 초깃값은 0으로 설정, 구조분해할당으로 각각 count(State 변수)와 setCount(set 함수)를 설정해주었습니다.
그 후, button이 클릭될 때마다 count의 값이 올라가도록 설정했습니다.
또한, console.log("Update!")를 통해 버튼 클릭 시마다, 콘솔에 Update! 출력을 확인하여,
변경되는 count State 값이 변할 때마다 해당 State가 포함된 컴포넌트가 다시 렌더링 것을 확인할 수 있습니다.
이처럼 컴포넌트는 자신이 관리하는 State값이 변할 때마다 자동으로 다시 호출되는데, 이를 '리렌더' 또는 '리렌더링' 이라고 합니다.
State로 사용자 입력 관리
input
text라는 이름으로 컴포넌트의 상태 관리 값을 설정해준 후,이를 input 태그의 onChange를 이용하여 사용자가 텍스트 입력 시 마다 해당 값이 text에 저장되도록 handleOnChange 함수를 설정해주었습니다.
이 코드에서도 State변수인 text 값의 변경 시마다 해당 컴포넌트가 자동으로 리렌더되어 현재의 State 값이 다시 렌더링되어 보여지게 됩니다.
select
Select 1
Select1에서 사용자가 옵션을 변경하면, onChage 이벤트가 발생 하고, 이 때 e.target.value에는 현재 사용자가 선택한 option값이 저장됩니다.
Select 2
Select2의 코드의 경우 참고로 알아두시면 좋을 것 같습니다. select에서 사용자가 옵션을 변경하면, onChage 이벤트가 발생하여 값이 저장되는 것은 같지만, e.target.value에는 현재 사용자가 선택한 key 속성이 저장됩니다. 예를 들어, 사용자가 2번 옵션을 선택했다면, Key값이 저장되어 e.target.value값은 "2번"이 됩니다.
이렇게 key를 설정하는 경우는 추후 아래와 같이 옵션을 배열로 관리할 경우, 필요하게 됩니다.
const options = ["1번", "2번", "3번"];
// ... 중략 ...
<select value={option} onChange={handleOnChange}>
{options.map((opt) => (
<option key={opt}>{opt}</option>
))}
</select>
textarea
textarea 태그 역시, onChage 이벤트를 통해 e.target.value의 값을 전달해 text(State 변수)의 값을 변경합니다.
여러 개 입력 받기
입력 값을 객체형태, 즉 여러 개의 프로퍼티값을 입력 받을 경우를 구현해보겠습니다. 이 코드에서 주목해야될 부분은 객체 형태로 설졍되는 State와 setState입니다.
State에서 초깃값 설정 시, 내부를 객체형태로 각각의 프로퍼티와 초깃값을 설정해줍니다.
그 후 setState 함수는 ...state를 통해서 새로운 객체를 생성해 전달하고, name 속성 (e.tarrget.name)을 key로 하여 입력 폼에 입력한 값을 value로 저장하게 됩니다.
좀 더 자세히 설명하면, e.target.name은 현재 이벤트가 발생한 요소의 name 속성으로
예를 들어, 성별 입력 select 태그에서 onChange 이벤트 발생 시 e.target.name은 gender가 되는데, 이를 통해 state의 3가지 프로퍼티 중, 현재 이벤트가 발생한 요소인 gender 프로퍼티의 value 값이 변경되게 되는 것 입니다.