[React] 리액트 useState 개념

 

 

* 본 글은 스스로 공부하면서 정리한 내용입니다. 틀린 부분은 댓글로 남겨주시면 감사하겠습니다! *

 

 

Hook은 React 16.8에 새로 추가된 기능입니다.
class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.

 

React 공식문서에 나와있는 Hook에 대한 설명입니다. 여기서 눈여겨 볼 부분은 class를 작성하지 않고도! 라는 부분입니다.

Hook이 등장하기까지 5년동안 초기 React 개발자들은 State(상태)관리를 하기위해선 class 문법으로 컴포넌트를 만들어서 사용해야 했습니다. 하지만 Hook의 등장으로 함수형 컴포넌트에서도 상태관리가 가능하게 된 것이죠!

 

 

State를 관리해야 하는 상황을 생각해보면,

 

1. 카운터 컴포넌트를 생성했다.

               ↓

2. 카운터 기능을 하려면 어떤 값을 설정하고, 그 값을 증가시켜야 한다.

즉, 컴포넌트 내에서 쓰이는 값이 동적으로 계속 변하는 값이다.

               ↓

3. useState 훅을 사용한다.

 

이럴때 사용해요!

 

이처럼 계속 변하는 값을 쉽게 관리하기 위해 useState 훅을 사용합니다.

 

useState

const [state, setState] = useState(initialState)

const [상태값, 상태값 갱신함수] = useState(초깃값)

 

 

useState는 상태관리 훅입니다. 다음과 같은 특징을 가집니다.

• 컴포넌트 내에서 동적인 값을 사용할 때 이용
• 초깃값을 사용하고, 이후 호출시에 초깃값은 무시됨
• State 값을 갱신하려면 setState 함수를 이용하고, State 바로 수정하면 안됨
• State 값이 갱신되면 자동으로 컴포넌트 리렌더링 됨

 

 

위 코드를 뜯어보면 아래와 같습니다.

const value = useState(초깃값)

const firstValue = value[0] // 초깃값
const secondValue = value[1] // setState함수

 

useState 훅은 리턴 값으로 배열을 반환합니다. 그 배열의 첫 번째 인자로 초깃값을, 두 번째 인자로 함수를 반환하는데

그 함수는 State값을 갱신시키는 setState함수입니다. 여기서 firstValue 변수는 State 값인데, 최초 렌더링시에는 초깃값이 들어가고 이후에 초깃값은 무시됩니다.

 

 

이걸 카운터 예시로 적용시켜보면,

const [count, setCount] = useState(0)

count란 이름으로 State를 만들고, setState함수를 관례적으로 앞에set을 붙여 setCount라고 이름지었습니다.

그리고 초깃값으로 0을 주었습니다.

 

 

useState 상태값

useState의 상태값에는 모든값이 들어갈 수 있습니다.

const [state, setState] = useState('str')
const [state, setState] = useState(0)
const [state, setState] = useState(true)
const [state, setState] = useState({})
const [state, setState] = useState([])
const [state, setState] = useState(function)

 

다만, 공식문서에서는 초깃값으로 함수를 담을때는 초기값 계산시 큰 비용이 드는 경우, 최초 렌더링시에 한 번만 실행하도록 하기 위함이라고 표기하고 있습니다.

 

* 초깃값으로 함수를 줄 때, 리렌더링시마다 메세지 출력하기 *

const App = () => {
	function initialState() {
    	console.log('1 증가하였습니다')
        return 0
    }
    
	const [count, setCount] = useState(initialState()); //즉시호출
	return (
    	<div>
        	{count}
            <button onClick={()=>setCount(count + 1)}>
            	버튼
            </button>
        </div>
    )
}

 

위 경우처럼 initialState라는 0을 리턴하는 함수를 초깃값으로 주면, 버튼 클릭할 때 마다 로그가 찍히는 걸 볼 수 있습니다.

만약 최초 렌더링시 한 번만 호출하고싶다면?

 

const [count, setCount] = useState(initialState)

또는

const [count, setCount] = useState(()=>initialState())

해주면 처음 렌더링시 한 번만 호출되고 다음엔 호출되지 않습니다.

 

 

 

그리고 당연히 하나의 컴포넌트 내에서 여러개의 상태값을 정의할 수 있습니다.

const Counter = () => {
	const [count, setCount] = useState(0);
    const [color, setColor] = useState({ background: 'black'});
}

 

 

 

 

 

 

 

* 본 글은 스스로 공부하면서 정리한 내용입니다. 틀린 부분은 댓글로 남겨주시면 감사하겠습니다! *