useState

import {useState} from 'react'
 
const [state,setState] = useState(initialState)

인수로는 사용할 state의 초깃값을 넘겨줌 (안넣으면 undefined) 반환값은 배열 첫 번째 원소로 state 값 자체, 두 번째 원소 setState 함수를 사용해 state 값을 변경할 수 있음

function Component(){
  let state='hello'
 
  function handleButtonClick(){
    state='hi'
  }
 
  return(
    <>
    <h1>{state}</h1>
    <button onClick={handleButtonClick}>hi</button>
    </>
  )
}

이는 동작하지 않습니다.

이유는, 리렌더링이 일어나지 않기 때문입니다.

렌더링 함수 컴포넌트의 return과 클래스 컴포넌ㄴ트의 render 함수를 실행 -> 이 실행 결과를 이전의 리액트 트리와 비교해 리렌더링이 필요한 부분만 업데이트해 이뤄짐

function Component(){
  let state='hello'
  const [,triggerRender] = useState()
 
  function handleButtonClick(){
    state='hi'
    triggerRender()
  }
 
return(
    <>
    <h1>{state}</h1>
    <button onClick={handleButtonClick}>hi</button>
    </>
  )
 
}

위와 같이 변경해도 문제가 해결이 되지 않는다!

이유는, 렌더링은 함수 컴포넌트에서 반환한 결과물은 return의 값을 비교해 실행되기 때문입니다. 즉 매번 렌더링이 발생될 때마다 함수는 다시 새롭게 실행됩니다. 이 말은 결국 state도 다시 hello로 초기화가 되게 됩니다.

함수 컴포넌트는 매번 함수를 실행해 렌더링이 일어나고, 함수 내부의 값은 함수가 실행될 때마다 다시 초기화 됩니다.

useState의 예상 내부 구조

function useState(initialValue){
  let initialState=initialValue
 
 
  function setState(newValue){
    initialState=newValue
  }
 
  return [initialState,setState]
 
return(
    <>
    <h1>{state}</h1>
    <button onClick={handleButtonClick}>hi</button>
    </>
  )
 
}

하지만 이것을 실제로 실행시켜보면 원하는 대로 작동하지 않습니다.

스터디 개요