Reack Hook : useState

⭐ useState는 컴포넌트에 state변수를 추가할 수 있는 React Hook입니다.

배열 구조 분해(구조 분해 할당)을 사용하여 [A,setA]와 같은 state변수의 이름을 지정하는 규칙을 가지고 있다.

const [temp,setTemp] = useState(initialState);
//initialState : state 'temp'의 초기 설정 값
const [nothing,setNothing] = useState();
//초기 설정 값을 할당 하지 않는 상태

useState는 두 가지 배열을 반환한다. [temp,setTemp]에서 temp라는 state배열과 setTemp라는 temp상태값을 변경할 수 있는 set함수이다.

setTemp(temp=>temp+1)
//위는 업데이트 함수를 이용하여 이를 큐(queue)에 넣는다.
setTemp(temp+1)
//업데이트가 되지 않기때문에 중복으로 사용해도 값은 값 반환

• useState의 state가 업데이트가 되면 컴포넌트를 린랜더링 시킨다.

• useState에는 두 가지의 업데이트가 있다.

  • setState(state+1) : 실행중인 코드에서의 업데이트가 되지 않는다

        ()=>{
          setState(state+1)
          setState(state+1)
          setState(state+1)
          console.log(state) // 결과는 state + 3이 아니라 state가 출력된다.
          // 실행중인 코드에서의 업데이트가 되지 않기 때문이다.

  • setState((state)=>state+1) : 업데이트 함수를 사용함으로 해당 사항이 큐에 등록되어 싷행된다

        ()=>{// state가 2라면
          setState(state=>state+1)//state = 3
          setState(state=>state+1)//4
          setState(state=>state+1)//5
          console.log(state) // 결과는 5 (state+3의 결과)

• 객체나 배열의 state를 직접 변경하는 경우엔느 리랜더링이 되지 않는다. (화면변화x)

setObject(obj);// 화면 변화 x ,state가 이전 state와 같으면 업데이트 하지 않는다. -> 객체 및 배열 비교
//
setObject({
  ...obj,
  thing: something
})//정상