함수형 컴포넌트
에서 useState
를 사용해 state
를 관리할 수 있다.
함수형 컴포넌트
, 그리고state
가 뭔지 모르겠으면 아직 이 포스트를 볼 때가 아닙니다!!
사용법은 간단합니다.
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
)}
initialState
에 state
의 초기값을 정해 줄 수 있습니다.setState
는 반드시 'set' + 'State'
상태이름에 첫글자를 대문자로 작성해 줘야합니다.[fruit,setFruit]
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
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
는 다음 포스트에서 살펴보겠습니다!