React Hook - useState 상태를 저장, 변경

AceBed·2022년 4월 28일
0
post-thumbnail

함수형 컴포넌트에서 useState를 사용해 state를 관리할 수 있다.

함수형 컴포넌트, 그리고 state 가 뭔지 모르겠으면 아직 이 포스트를 볼 때가 아닙니다!!

useState

사용법은 간단합니다.

import React , {useState} from 'react'

import문에 {useState}를 추가함으로, 해당 .jsx파일에서 state를 관리 할 수 있게 됩니다.

const Blog = () => {
  	// [ 상태이름, set상태이름 ] = useState( 상태 초기값 )
	const [state,setState] = useState(initialState)
    // ..code
}

Blog컴포넌트에 useState를 사용해 상태를 관리할 수 있습니다.

  • state 상태의 이름을 지어줄 수 있습니다.
  • state는 지어준 이름 그대로 컴포넌트 내에서 사용할 수 있습니다
	const [state,setState] = useState(initialState)
    
    setState({
      ...state,
      state:value
    )}
  • initialStatestate의 초기값을 정해 줄 수 있습니다.
  • setState는 반드시 'set' + 'State'상태이름에 첫글자를 대문자로 작성해 줘야합니다.
    ex) [fruit,setFruit]

setState

setState는 사실 useState의 메서드 자리입니다.
그러므로 setState()로 호출하여 상태를 변경 할 수 있게되죠.

// ..code
setState( value )

state는 객체, 배열, boolean 등 여러 데이터타입으로 존재할 수 있으므로, setState도 마찬가지로 state의 기존 데이터타입을 준수하여 사용합니다.

//..code

setState({
  ...state,
  value:value
}) // obj

setState(
  ...state,
  state:[
  	...state,
  	value
  ]
) // arr

setState(false) // boolean

issue

setState함수형 컴포넌트에서 state를 관리 할 수 있게 해주지만, 조건을 걸지 않고 사용할 경우, infinite loop가 걸릴 수 있습니다.

const Loop = () => {
  	const [state,setState] = useState(initialState)
    
    setState({
      ...state,
      state:value
    )}
    // state가 변경됐으므로 react는 이를 감지하고 
    // Loop 를 rerender함
    // Loop 가 rerender 되면서 setState를 만나게되고
    // state 가 변경되므로 다시 Loop가 rerender됨
    // ...반복
  
  return (
    <>
    	{state}
    </>
  )
}

그러므로 onclick,onChange등의 조건을 걸거나 함수, 혹은 다른 hook에서 상태를 변경하는 것을 지향합니다.

// ..code

const clickHandler = () => {
  setState( value )
}

useEffect(() => {
  setBoolean(false)
},[state])
  

useEffect는 다음 포스트에서 살펴보겠습니다!

profile
재시작, restart, リスタート, sự khởi động lại

0개의 댓글