[React Hook] useState

참고: React Hook이란?

useState

• 리액트로 개발을 하다 보면 가장 많이 쓰이는 훅

  상태를 컴포넌트에 추가하고 싶을 때 사용한다

예시 코드

function ColorItem() {
	// 함수 최상단
	const [color, setColor] = useState('#E9E9E9') 
    
    return (
    	<>
        {/* UI 코드*/}
        </>
    )
} 

사용법

	const [color, setColor] = useState('#E9E9E9')

• 리턴값 : Array[2]
  • 첫 번째 값: 상태를 나타내는 변수 (위 예시에서 color 변수)
  • 두 번째 값: 이 상태를 변경할 때 사용하는 함수 (위 예시에서 setColor)
    • 관습적으로 상태 변수에 set을 붙여서 변수명을 정한다
  • 그렇기 때문에 위 예시처럼 구조화해서 쓸 수 있다.
• useState(초기값) : 초기값 부분에는 color 상태 변수의 초기값으로 지정하고 싶은 것을 넣는다.

특징 : 렌더링

setColor로 값을 바꿀 때마다 해당 상태를 쓰는 컴포넌트가 훅에 의해 다시 호출되면서 렌더링이 된다

• 상태가 자주 바뀐다 === 컴포넌트가 자주 렌더링이 된다
  ➡️ 따라서, 상태가 자주 바뀔 컴포넌트에는 시간이 많이 걸리는 처리를 하지 않는 것을 권장함

참고 자료

러닝 리액트 2판/ 알렉스 뱅크스, 이브 포셀로 저/ 한빛 미디어, O'RELLY