useState

상태(state)를 저장하고 관리할 수 있게 해주는 React의 Hook이다.

• 상태?
  -> UI에 보여줄 정보를 결정할 때 사용할 상태값

// westagram login페이지에서 사용한 state들
const [idInput, setIdInput] = useState('');
const [passwordInput, setPasswordInput] = useState('');
const [btnOnOff, setBtnOnOff] = useState('disabled-btn');

idInput/passwordInput -> 상태값
setIdInput/setPasswordInput -> 상태값을 업데이트하는 함수

예)

  const btnHandler = () => {
    idInput.length > 0 && passwordInput.length > 0
      ? setBtnOnOff('')
      : setBtnOnOff('disabled-btn');
  };

<button type="button" className={`login-btn ${btnOnOff}`}>로그인</button>

btnHandler 함수는 idInput과 passwordInpt state의 길이를 검사하여 두 state 모두 한글자 이상일 때 btnOnOff state를 빈 문자열로 바꿔준다.
btnOnOff의 기본값은 disabled-btn이며 이는 버튼이 비활성화 됐을때의 css속성을 담은 클래스이고 button의 className자리에 배치하였다.