useState()

개요

const [state, setState] = useState(initialState);

useState훅은 컴포넌트에 state변수를 추가할 수 있게 해주는 React훅이다.
initialState = state에 담기는 초기값이며 렌더링 된 후엔 현재값을 의미한다.
state = 첫 번째 렌더링시 initialState가 담기는 부분이다.
setState = state를 다른 값으로 업데이트하고 리렌더링할 수 있는 set(설정자)함수이다. (함수다 함수...!)
함수 인자로는 state가 변경될 값을 넣어주면 된다.

---

활용예제

function App () {
	const [count, setCount] = useState(0)
    
    const countHandle = () => {
    setCount(count + 1)
	}

	return (
    	<div>
        	<p>카운트다운 : {count}</p>
            <button onClick={countHandle}>증가</button>
        </div>
    );
    
    export default App;

이런식으로 state를 다른 값으로 업데이트하고 싶을때 set함수를 활용하여 업데이트 시킬 수 있다.
업데이트가 될때마다 (함수가 실행될때마다) 컴포넌트를 렌더링을 한다.

React에서 가장 기본이 되는 훅이다. state는 컴포넌트가 가질 수 있는 상태를 의미한다. state를 간편하게 생성하고 업데이트 할 수 있게 해주는 훅이다.

---

적용점

가장 기본적인 단위이기 때문에 특이한 적용점은 생각이 안난다.
다만 게시판 및 하고자하는 프로젝트에 데이터 리스트가 추가되고 빠질 시에 필히 사용되는 함수일듯하다.
다만, 업데이트 될때마다 렌더링이 되기때문에 최적화의 문제에도 신경을 써야할 듯 하다. (후에 나오는 방법으로 렌더링 전 후 값이 같은 값은 렌더링이 안되게하는 훅을 이용하여 최적화.)

---

참조

• https://react-ko.dev/reference/react/useState
  (FE재남과 [React 공식문서 스터디 그룹]의 비공식 한글 번역 사이트 'useState')
• https://youtu.be/G3qglTF-fFI?list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO
  (별코딩 'React Hooks에 취한다' 시리즈)