React Hooks
리액트 훅이란?
리액트 v16.8에 새로 도입된 기능으로, 함수형태의 컴포넌트에서 사용되는 몇가지 함수를 Hook이라고 부릅니다.
상태 관리를 도와주는 useState, 렌더링 직후 작업을 설정하는 useEffect 등 다양한 훅이 있습니다.
리액트 훅을 사용하는 이유
기존 클래스형 컴포넌트는 리액트의 큰 진입장벽이자, 코드의 재사용성, 코드 구성을 어렵게 만들고 바닐라JS 의존도가 높은 형태였습니다. 클래스는 잘 축소되지도 않고, 리로딩이 깨지기 쉽거나 신뢰하기 어려운 몇가지 단점이 있었기 때문에 최근에는 클래스형 컴포넌트 사용을 지양하고 함수형 컴포넌트 사용이 확장되고 있습니다.
따라서 함수형 컴포넌트를 보다 효율적으로 사용하기 위해 신규 도입된 기능인 것입니다.
리액트 훅 종류
- useState
- useEffect
- useRef
- useMemo
- useCallback
- useContext
- useReducer
- Custom Hook
useState
State : 컴포넌트의 상태
State: time, count ...
React에서 동적인 값을 State, 상태라고 부릅니다.
동적인 값을 핸들링하기 위해 useState 라는 훅을 사용하며, useState의 일반적인 형태는 아래와 같습니다.
const [state, setState] = useState(초기값);
예제
시간을 나타내는 time 이라는 state로, setState의 동작을 살펴봅시다.
코드 실행 계획 :
1. const [time, setTime] = useState(5);
time의 변경은 setState를 통해서 진행한다.
2. setTime(6); 으로 지정
3. 최종 time의 값은 time(6); 로 변화
실행 코드
function App() {
const [time, setTime] = useState(1);
const handelClick = () => {
let newTime;
if (time >= 12) {
newTime = 1;
} else {
newTime = time + 1;
}
setTime(NewTime);
};
return (
<div>
<span> 현재 시각 {time}시</span>
<button onClick={HandleClick}>Update</button>
</div>
);
}useState의 실행동작
1. time 을 변경하기 위해 setTime 사용
2. setTime을 변경할 때에도 변수 생성해서 사용하기
3. 새로 생성한 변수 = setTime
4. -> 최종적으로 time의 값 변경
- state 변경함수는 async하게 처리되는 함수이기 때문에, 함수 실행 시 시간이 오래 소요되는 경우 다음 코드를 실행시키게 됩니다. 따라서 정확한 데이터를 호출하기 위해서는 별도의 변수를 통해 setState를 변화시키고, 변화된 setState로부터 state 값이 변환되도록 코드를 구성해야합니다.
