[React] hook - useState

Theme. useState

 

코드와 함께 알아보도록 한다.

useState 사용을 위해서 import 부분에 추가해주는 것을 잊지 말자.

 

아래 코드의 const [ state, setState ] = useState('click'); 에서

state 부분은 getter 부분

setState는 setter 부분

'click'은 초기값

으로 이해하면 된다!

 

// import 작성
import React, { useState } from 'react';
 
 
function App() {
  
  // (보호)변수 선언 -> String state = "click"; 과 같은 효과
  //       get      set                 초기값
  const [ state, setState ] = useState('click');
  
  console.log(state); 
  // state = 'abc'; 에러! - 상수에 대입은 불가능
  // setState('abc'); 에러! - 다시 초기화 할 수 없음
 
  return (
    <div>
      <button onClick={() => setState('clicked')}>{state}</button>
    </div>
  );
}
 
export default App;

 

그 결과 버튼을 누르기 전과 후를 비교하면,

 

 

 

 

간단한 예시들을 추가로 살펴보자.

 

const INITIAL_COUNT = 0; // 상수
 
function App(){
 
  const [message, setMessage] = useState("");
  const [number, setNumber] = useState(INITIAL_COUNT);
  // const [number, setNumber] = useState(0);
 
  const btnclick = () => {  
    alert(message);
  }
 
  function counterBtn(){
    setNumber(number + 1);
  }
 
  const initCount = () => {
    setNumber(INITIAL_COUNT);
  }
 
  return (
    <div>
      <input onChange={(e) => {setMessage(e.target.value)}} />
 
      <button onClick={btnclick}>message보기</button>
      <button onClick={() => btnclick()}>message보기</button>
 
      <p>{number}</p>
      <button onClick={counterBtn}>카운터</button>
      <button onClick={initCount}>초기화</button>
 
    </div>
  )
}
 
export default App;

 

우선, {btnclick}과 { () => btnclick() }이 같은 효과를 나타내는 것을 확인하기 위해 함께 적어두었다.

 

버튼을 클릭하지 않고, 초기 결과를 살펴보면 아래와 같다.

 

 

onChange 이벤트를 통해 input에 값을 입력하게 되면, 이를 message보기라는 버튼을 통해 확인할 수 있다.(alert)

 

또한, 카운터라는 버튼을 누르면 counterBtn()이 실행되고, setNumber(number + 1);에 의해 초기값 0에서 number가 1 증가하게 된다. (이때 주의할 것은 number++, number+=1과 같이 작성할 수 없다는 것이다) 

 

< input 태그에서의 useState 사용 >

 

function App(){
 
  const [inputTextVal, setInputTextVal] = useState("초기값");
  const [text, setText] = useState("React");
 
  const handleChange = (e) => setInputTextVal(e.target.value);
  
  // const handleChange = (e) => {
  //   setInputTextVal(e.target.value);
  // }
 
  const handleClick = () => {
    setText(inputTextVal);
    setInputTextVal("초기값");
  }
 
  return (
    <div>
      <h1>I love {text}</h1>
 
      <input type="text" value={inputTextVal} onChange={handleChange} />
 
      <input type="button" value="입력" onClick={() => handleClick()} />
    </div>
    
  )
 
}
 
export default App;

 

초기 결과는,

 

 

이때, input 태그에 값을 입력하게 되면, onChange 이벤트에 의해 handleChange 함수가 실행된다.

그리고 입력한 값이 handleChange 함수에서 setInputTextVal에 의해 inputTextVal을 변하게 한다.

즉, input의 value값이 입력한 값으로 나타나는 것이다.

이때, '입력'버튼을 누르게 되면(onClick) handleClick 함수가 실행되고, setText를 통해 text의 값을 변하게 한다.

 

그래서 만약 input 태그에 'you'라고 입력하고 입력 버튼을 누르게 되면,

 

 

 

< select 태그에서의 useState 사용 >

 

// select
const SelectBox = () => { // Component명의 첫 글자는 대문자 
  const [selectedVal, setSelectedVal] = useState("HTML");
 
  const handleChange = (e) => {
    setSelectedVal(e.target.value);
  }
 
  const SelectChoice = () => {
    alert(selectedVal);
  }
 
 
  return(
    <div>
      <p>현재 선택된 항목: <strong>{selectedVal}</strong></p>
 
      <select value={selectedVal} onChange={handleChange}>
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="REACT">REACT</option>
      </select>
 
      <button onClick={() => SelectChoice()}>선택된 값</button>
 
    </div>
  )
 
}
 
function App(){
 
  return(
    <div>
      <SelectBox />
    </div>
  )
}
 
export default App;

 

 

만약, CSS를 선택하고, onClick을 통해 선택된 값을 확인해보면,

 

 

 

< radio에서의 useState 사용 >

 

// radio
function InputRadio(){
  const [radioVal, setRadioVal] = useState("red");
 
  function handleChange(e){
    setRadioVal(e.target.value);
  }
 
  return(
    <div>
      <p>선택된 항목: <strong>{radioVal}</strong></p>
      <input type="radio" value="red" onChange={handleChange} checked={radioVal === "red"} />빨강
      <input type="radio" value="green" onChange={handleChange} checked={radioVal === "green"} />초록
      <input type="radio" value="blue" onChange={handleChange} checked={radioVal === "blue"} />파랑
 
    </div>
  )
}
 
function App(){
  return(
    <div>
      <InputRadio></InputRadio>
    </div>
  )
}
 
export default App;
 

 

이때, "=="는 주소의 비교이고, "==="는 값의 비교이다.

 

초기 결과와 파랑을 선택했을 때의 결과는

 

 

 

<  checkbox에서의 useState 사용 >

 

// checkbox
 
const InputCheckBox = () => {
  const [ checkedVal, setCheckedVal] = useState(false); // 체크 안됨
 
  const handleChange = (e) => {
    setCheckedVal(!checkedVal); // 체크가 되거나 안되거나 반대로!
  }
 
  return(
    <div>
      <input type="checkbox" onChange={handleChange} checked={checkedVal} />독서
    </div>
  )
 
}
 
function App(){
  return(
    <div>
      <InputCheckBox/>
    </div>
  )
}
 
export default App;

 

< random 넘버 생성 및 현재 날짜 나타나도록 하기 >

 

참고로,

const [ randState, setRandState ] = useState(0); 부분은

var randNumberState = useState(0); // 배열! 0은 초기값

var randState = randNumberState[0];

var setRandState = randNumberState[1];

로 바꿀 수 있다. 

 

//random
function RandAndDate(){
  // const [randState, setRandState] = useState(0);
  var randNumberState = useState(2); // 배열
  var randState = randNumberState[0];
  var setRandState = randNumberState[1];
 
  const [mydate, setMydate] = useState("");
 
  const nowDate = () => {
    setMydate( (new Date()).toString() ); // 현재 날짜
  }
 
 
  return(
    <div>
      <p>Number:{randState}</p>
      <p>Date:{mydate}</p> 
      <input type="button" value="random" 
        onClick={ function() {
                      setRandState(parseInt(Math.random()*10))
                    }} />
      <input type="button" value="Date" onClick={nowDate} />              
    </div>
  );
}
 
function App(){
  return(
    <div>
      <RandAndDate/>
    </div>
  )
}
 
 
export default App;

 

 

 

 

끝.