[React] Hooks : useState( )

📝 useState

리액트 컴포넌트에서 동적인 값을 상태(state)라고 부릅니다.
사용자 인터렉션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리하는 것이 필요합니다.
useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줍니다.

📜 useState 활용

import { useState } from 'react';

const Counter = () => {
  
  	let [count, setCount] = useState(0);
  
	return(
    	<div>
      		<h1> { count } </h1>
      		<button onClick={() => {setCount(count + 1)}}>+1</button>
			<button onClick={() => {setCount(count - 1)}}>-1</button>
      	</div>
    )
};
export default Counter;

useState는 상단에 import 구문을 통해 불러옵니다.
useState 함수의 파라미터에는 상태의 기본값을 넣어 줍니다. 현재는 카운터의 기본값을 0으로 설정한 상태입니다.

const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태의 기본값);

이 함수가 호출되면 배열을 반환합니다.
배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수입니다.
이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 렌더링됩니다.

📜 useState를 여러 번 사용하기

하나의 useState 함수는 하나의 상태 값만 관리할 수 있습니다. 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러 번 사용하면 됩니다.

import { useState } from 'react';

const Info = () => {
  
  	let [name, setName] = useState('');
  	let [nickName, setNickName] = useState('');
  
  	const onChangeName = (e) => {
    	setName(e.target.value);
    };
    const onChangeNickName = (e) => {
        setNickName(e.target.value);
    };
  
	return(
    	<div>
      		<div>
              	<input value={name} onChange={onChangeName} />
              	<input value={nickName} onChange={onChangeNickName} />
            </div>
			<div>
				<p>이름 : </p> {name}
				<p>닉네임 : </p> {nickName}
            </div>
              
      	</div>
    )
};

export default Info;