State

State란 컴포넌트에서 동적인 값을 의미한다.
react에 있는 함수를 사용하면 state를 관리할 수 있다.

import React, {useState} from 'react';

때문에 위와 같은 구문을 반드시 작성해주어야 사용할 수 있다.

useState(초기값)
//👉 [state, state를 변경할 수 있는 함수]로 이루어진 배열을 return한다.

useState를 이용하여 작성하면 된다.
실제 작성법은 아래와 같다.🔽

// App에서 Counter 컴포넌트를 실행시키고 있다.
import './App.css';
import Counter from './components/Counter';

const Counter = () => {
	const [num, setNumber]= useState(0);
  // state를 num에, state 변경 함수를 setNumber에 담았다.
  // 현재 num 함수는 state의 초기값을 0으로 받았음으로 0이다.
	const onIncrease =()=>{
		setNumber(num+1);
      // setNumber로 함수가 실행될 때마다 state를 num+1로 변경시킨다.
	}
	const onDecrease =()=>{
		setNumber(num-1);
     // setNumber로 함수가 실행될 때마다 state를 num-1로 변경시킨다.
	}
		return (
		<>
			<h2>{num}</h2>
			<button onClick={onIncrease}>+1</button>
			<button onClick={onDecrease}>-1</button>
		</>
      // 버튼을 누를때마다 실행되도록 dom을 작성했다.
	);
}

export default App;

여러개의 state

import React, {useState} from 'react';
// App에서 InputSample 컴포넌트를 실행시키고 있다.


const InputSample = () => {
	const [inputs,setInputs]= useState({
		usernamevalue:'',
		usernicknamevalue:''
	});
    const {usernamevalue,usernicknamevalue}= inputs;
// inputs의 값을 {usernamevalue:'', usernicknamevalue:''} 객체로 저장했다.
// usernamevalue, usernicknamevalue에 그 저장한 값 ''을 각각 저장했다.
// 이 값은 input의 value에 들어갈 값이다.
  
  
	const onChanged=(e)=>{
		const {value, name}= e.target;
      // 구조분해 할당을 통해 value와 name에 값을 지정했다.
		// value 👉 이벤트 대상자의 value = e.target.value
		// name 👉 이벤트 대상자의 name = e.target.name
		setInputs({
			...inputs,
			// 작성되어있던 inputs를 나머지함수로 뿌려줬다.
			[name+"value"]:value
			// 이벤트가 발생한 대상자의 name+"value": value
          	// 나머지 함수에서 작성된 inputs 중
              //key가 name+"value"와 일치하는 것이 있으면
          	  // 이 구문에 의해 덮힌다.
            // +"value"를 작성하는 이유는
              //이 예시의 e.target.name에 "value"문자열을 더한 값을
              //input의 value로 지정했기 때문이다.
            //[name+"value"]로 작성하는 이유는 객체{}안에서
              // []로 감싸 작성한 것만을 변수로 받아들이기 때문이다.
          	  // []없이 name+"value"로 작성할 경우 name을 문자열로 인식한다.
		});
	}

	const onReset=()=>{
		setInputs({
			usernamevalue:'',
			usernicknamevalue:''
		});
	}
    
    
//*--         DOM을 작성하는 부분         --*//

  return (
		<div>
			<input name="username" onChange={onChanged} value={usernamevalue}/>
			<input name="usernickname" onChange={onChanged} value={usernicknamevalue}/>
			<button onClick={onReset}>초기화</button>
			<div>
				<span>값:{usernamevalue}, {usernicknamevalue}</span>
			</div>
		</div>
	);
};

export default InputSample;