useState

여러개의 상태값 관리

• 읽기 쉽고 추출하여 사용하기 쉬운 코드 작성을 위해 독립적으로 또는 관련있는 것을 그룹화하여 작성

const [image, setImage] = useState(
  { left: 10, right: 10, top: 10, bottom: 10, width: 100, height: 100 }
)
setImage({ ...image, top: 50, right: 50 })


const [positon, setPosition] = useState(
  { left: 10, right: 10, top: 10, bottom: 10 }
)
const [size, setSize) = useState(
  { width: 100, height: 100 }
)

useState 에서 대괄호를 사용해서 변수를 선언

• 배열 구조 분해를 이용함
• useState를 이용하여 변수를 선언하면 2개의 원소 쌍이 들어있는 배열
• 첫 번째 원소는 상태값, 함수 호출 시 입력한 인수가 초깃값으로 사용
• 두 번째 원소는 상태값을 변경할 수 있는 함수

const [colour, setColour] = useState('mint')


let colourStateVariable = useState('mint')
let colour = colourStateVariable[0]
let setColour = colourStateVariable[1]

이전 상태값 저장하기

• useRef 훅을 이용

const [age, setAge] = useState(30)
const prevAgeRef = useRef(30)

useEffect(
  () => {
    prevAgeRef.current = age
  },
  [age]
)

const prevAge = preAgeRef.current