[React.Hook] 1. useState

개인 공부용

useState : 임시로 값을 저장하여 활용하기 위한 함수

 

1. 형식

---

let [state 명, state 변경함수 ] = useState(state 변수의 초기 할당 값)

---

state명과 state 변경함수 부분은 자유롭게 작명하면 됨.

하지만 둘 간의 연관성을 명확히 하기 위해 state 라고 변수를 적으면, 함수에는 setState 라고 적는게 일반적임

 

 

2. 설명

let [state, setState] = useState(0)

 

가 주어졌을 때,

useState(0)은 state의 초기값으로 0을 지정한다는 의미

즉, 예시의 state = 0 

 

setState 는 함수로 state의 값을 수정하는 함수임.

예를 들어, setState(5) 로 설정하면, state = 5가 됨

 

니꼬 선생님에 의하면 setState(5) 와 같이 직접 state 값을 지정하는 것은 향후

어떤 문제를 일으킬지 알수 없다고 함.

 

따라서 다음과 같이 입력하여 setState에 정확히 5라는 값을 대입한다는 것을 명확히 하는 것이 향후 예상치 못한 문제를 예방하기 위한 좋은 문법임

setState((result)=>result =5)

*result는 임시변수명임 result 외 에도 어떤 이름이 들어와도 동일한 인자값이 들어옴
즉, result -> state로 바꿔서
setState((state)=> state =5) 라고 해도 무방하다는 의미

 

 

 

3. 예시

 

직접 만들어보는)  단위 변환기 1

import './App.css';
import { useState } from 'react';



function App() {

변수명ㄱ  변수의 기본 할당값 ㄱ     
let [num,setNum] = useState(0);
            ㄴ변수변경함수        
   
   //예시) 분-시, 시-분, m-cm 단위 변환하기
  return (
    <div className="App">
      <h3>Metric Conversion :{num} </h3>

      <label htmlFor = "minutes">Minutes</label>
      <input id = "minutes" onChange={(e)=>{
        num = e.target.value     ㄴonChange: 키보드 조작 감지 시 {   } 내 코드를 실행
        setNum(num/60+' hour') 
  }}    type="number"></input><br/>

      <label htmlFor = "hour">Hours</label>
      <input id = "hour" onChange={(e)=>{
        num = e.target.value //e : event  ,  target : event가 발생하는 태그       
        setNum(num*60+' minute') 
  }}    type="number"></input><br/>

      <label htmlFor='cm'>m-cm</label>
      <input id="cm" type="number" onChange={(e)=>{
        num = e.target.value 
        setNum(num*100+' cm')
      }}></input>
     </div>
  );
}



export default App;

 

직접 만들어보는) 단위 변환기 2 (select 태그 적용)

     <select> 드롭박스를 적용한 단위 변환기

import './App.css';
import useState from 'react';

function App() {

let [num,setNum] =useState(0);
let [select,setSelect] =useState(false) 

  return(
    <div className="App">
     <h3>Metric Conversion :{num}</h3>
     <select onClick={(e)=>{
      let children =e.target.children
      for(let i=0; i<children.length; i++){   
       setSelect(children[i].selected)      
} //선택된(selected) option이 활성화 되면 true를 반환하는 특성을 활용해서 그 결과값을 setSelect로 전달
      
}}>
      <option>분-시간 변환</option>
      <option>미터-센터 변환</option>
     </select>
     {select ===true ?  
     <MinutesToHour num={num}setNum={setNum}/>:
     <MeterToCm num={num}setNum={setNum}/>}
     </div>  //select가 true 라면 분-시간 변환기를 보여주고
);           // false 라면 미터-센터 변환하기를 보여준다.
}


// 분- 시간 변환기
function MinutesToHour(props){
  return(
  <div className='MinutesHourConvert'>
    
      <article className='convert'>
      <label htmlFor ="minutes">Minutes</label>
      <input
        id ="minutes"
        onChange={(e)=>{
          let copy ={...props.num}
          copy =e.target.value
          props.setNum(copy/60+' hour') 
}}type="number"/>
      
      <label htmlFor ="hour">Hours</label>
      <input id ="hour"onChange={(e)=>{
        let copy ={...props.num}
        copy =e.target.value
        props.setNum(copy*60+' minute') 
}}    type="number"></input><br/>
      </article>
</div>
)
}


//미터 변환기
function MeterToCm(props){
  return(
  <div>
    
  <label htmlFor='cm'>m-cm</label>
  <input id="cm"type="number"onChange={(e)=>{
    let copy ={...props.num}
    copy =e.target.value
    props.setNum(copy*100+' cm')
}}></input>
</div>
)
}

export default App;

 

단위변환기1