리액트 입문(State)

State란 무엇인가?

state를 쓰는 목적은 UI를 바꾸기 위함이다. State를 만들 때는 useState()를 사용한다. state란 컴포넌트안에서 변할 수 있는 값이다.

 

 

 

# useState 훅을 사용하는 방식

const [ value, setValue ] = useState( 초기값 )

먼저 const 로 선언을 하고 [ ] 빈 배열 을 생성하고, 배열의 첫번째 자리에는 이 state의 이름, 그리고 두번째 자리에는 set 을 붙이고 state의 이름을 붙인다. 그리고 useState( ) 의 인자에는 이 state의 원하는 처음값(initial state, 언제든지 변할 수 있는 값)을 넣어준다. 

 

import React, { useState } from 'react'


function App() {

  const [id, setId] = useState('')
  const [password, setPassword] = useState('')

  return (
    <div>
      아이디 : <input type='text'
      value={id}
      onChange={function(event){
        setId(event.target.value)
      }}/>
      <br/>
      비밀번호 : <input type='password'
      value={password}
      onChange={function(event){
        setPassword(event.target.value)
      }}/>
      <br/>
      <button onClick={function(){
        if(id !== '' && password !== ''){
        alert(`고객님이 입력하신 아이디는 ${id}이며, 비밀번호는 ${password}입니다.`)
        setId('')
        setPassword('')
      }else if(id === '' || password === ''){ 
        alert('아이디와 비밀번호를 입력하세요')
      }
      }}>로그인</button>
    </div>
  )
}

export default App

위 코드는 아이디와 비밀번호 필드의 값을 state로 관리하고 입력에 변경이 일어날 때마다 setState를 이용해 동기화를 시켜줬다. 

아이디와 비밀번호를 입력하고 로그인 버튼을 누르면 입력한 아이디와 비밀번호를 alert창에 띄워주고 alert창 확인을 눌러서 닫으면 id와 password 영역을 초기화 시켜줬다. 

 

const [id, setId] = useState('') 로 id를 제어할 수 있는 setId와 state를 생성해줬다. 비밀번호도 마찬가지로 생성했다.

 

아이디와 비밀번호 입력하는 input과 로그인 button을 만들어줬다. 아이디는 input type='text'로 했고, 비밀번호는 input type='password'로 해서 입력 값이 보이지 않게 했다. 

 

아이디와 비밀번호 input에 onChange 이벤트를 만들어 변화가 생길때마다 함수가 실행되게 했는데, event.target.value 는 현재 입력값을 가리킨다. id를 제어할 수 있는 setId(event.target.value)로 필드값에 변화가 생길때마다 id와 password가 변화하게 했다. 

 

button onClick 이벤트를 사용해서 버튼을 클릭했을 때 작동하는 함수를 구성했는데 만약 id와 password 값이 '' 비어있지 않다면 입력한 아이디와 비밀번호 필드값을 alert창으로 나타내게 했고, alert창을 닫으면 setId('') 와 setPassword('')를 통해 두개의 값을 빈값으로 초기화 시켜줬다. 

 

그리고 만약 id와 password 둘 중 하나라도 '' 빈 값이라면 '아이디와 비밀번호를 입력하세요' 라는 alert창이 뜨게 했다.