[React] Study #6 | useState : 바뀌는 값 관리

리액트를 공부하는 초반에 조금 헷갈려했던 useEffect, useState 중 useState를 공부해보고자 한다.

사용자의 인터렉션에 따라 바뀌어야 할 때 어떻게 구현해야 하는지에 대해서..!

 

💡useState?

• react Hooks 중 하나!
• 함수형 컴포넌트에서도 상태를 관리할 수 있게 해주는 Hook
• 컴포넌트에서 동적인 값을 상태(state)라고 부른다. 따라서 useState를 사용하면 컴포넌트에서 상태를 관리할 수 있다.

---

1️⃣ 이벤트 설정하기

import React from 'react'

function Count() {

    const onIncrease = () => {
        // button이 눌렸을 때 동작할 코드
    }

    const onDecrease = () => {
        // button이 눌렸을 때 동작할 코드
    }

    return (
        <div>
            <h1>0</h1>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    )
}

export default Count

 

2️⃣ 동적인 값 끼얹기, useState

import React,{useState} from 'react' // 리액트 패키지에서 useState라는 함수 불러오기

function Count() {
	// 배열 비구조화 할당을 통해 각 원소를 추출
    const [number, setNumber] = useState(0); 	
    //첫번째 원소는 현재상태, 두번째 원소는 Sette함수, 0은 number의 기본값
  	// setter함수는 파라미터로 전달 받은 값을 최신항태로 설정
    
    const onIncrease = () => {
        setNumber(number+1);
    }

    const onDecrease = () => {
        setNumber(number-1);
    }

    return (
        <div>
            <h1>{number}</h1> {/* 0 이 아니라 {number} 값을 보여줘야 함 */}
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    )
}

export default Count

• useState를 사용할 때는 상태의 기본 값을 파라미터로 넣어서 호출해준다.
• 이 함수를 호출해주면 배열이 반환되는데, 이것이 [number, setNumber]

---

위에서는 Setter함수를 사용할 때, 업데이트 하고 싶은 새로운 값을 파라미터로 넣어주고 있는데, 그 대신에 기존 값을 어떻게 업데이트 할 지에 대한 함수를 등록하는 방식으로도 값을 업데이트할 수 있다.

import React,{useState} from 'react'
function Count() {

    const [number, setNumber] = useState(0);

    const onIncrease = () => {
    	// 그다음 상태로 파라미터를 넣어주는 것이 아니라 , 값을 업데이트하는 함수를 파라미터로 넣어줌.
        setNumber(prevNum => prevNum +1);
    }

    const onDecrease = () => {
   		// 그다음 상태로 파라미터를 넣어주는 것이 아니라 , 값을 업데이트하는 함수를 파라미터로 넣어줌.	
        setNumber(prevNum => prevNum -1);
    }

    return (
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+</button> 
            <button onClick={onDecrease}>-</button>
        </div>
    )
}

export default Count

 

 

➕함수형 업데이트는 주로 나중에 컴포넌트를 최적화를 하게 될 때 사용하게 된다. 

 

 

 

---

Reference

https://react.vlpt.us/