8.1 useState

Hook에 대한 간단한 설명

• hook이란 : 함수 컴포넌트에서도 상태관리를 할 수 있는 기능을 제공하여 기존 함수 컴포넌트에서 할 수 없었던 다양한 작업을 실행할 수 있게 한다.

💻 1. useState

→ 함수 컴포넌트에서도 가변적인 상태를 지니게 해준다.

import React,{ userState } from 'react';

const [value,setValue] = useState(0);

const Counter = () => {
	return(
    	<div>
        	<p>현재 카운터 값은 <b>{value}</b>입니다.</p>
            <button onClick={() => setVlaue(value+1)}>+1</button>
            <button onClick={() => setValue(value-1)}>-1</button>
       </div>
	);
};

export default Counter;

📚 사용 방법
1. 상단에 import 구문을 통해 불러온다.
2. const [value,setValue] = useState(0);

• useState함수의 파라미터에 있는 값은 상태의 기본값이다.
• 배열의 첫번째 원소 (value)는 상태값 => 기존 값
• 배열의 두번째 원소 (setValue)는 상태를 설정하는 함수 => 변하는 값

⌨ 2. useState 여러번 사용하기

하나의 useState 함수는 하나의 상태값만 관리한다.

❓ 관리할 상태가 여러개라면.
A. useState를 여러번 사용하면된다.

import React, {useState} from 'react';

const info = () => {
	const [name,setName] = useState('');
    const [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>
        	<div>
            	이름 : {name}
			</div>
            <div>
            	닉네임 : {nickname}
			</div>
		</div>
	</div>
    );
  };

export default Info;