useState, useReducer, useRef는 React 라이브러리에서 제공하는 Hook
중 일부이다.
Hook 이란?
- 함수형 컴포넌트에서 상태(state)와 생명주기 기능을 관리하기 위한 함수
- 클래스 컴포넌트에서는 주로 생성자에서 state를 정의하고 setState 함수를 통해 상태를 업데이트한다. 하지만 기존 함수 컴포넌트는 이러한 state를 정의해서 사용하거나 컴포넌트 생명주기에 맞춰 실행 되도록 할수 없기 때문에 나온것이 바로 훅(Hook)이다.
this.state
와 this.setState
와 유사한 기능을 함수형 컴포넌트에서 간편하게 사용할 수 있다.import { useState } from 'react';
: useState를 사용하기 위해서는 react에서 useState를 import 해야한다.
const [time, setTime] = useState(1);
: state의 생성과 동시에 가져야 할 초기값을 useState 함수의 인자로 넣어주면 state와 setState라는 두가지 요소를 배열 형태로 리턴해준다. state명은 알맞게 설정하면 되고 두번째 요소에 set을 붙여주면된다.
const onChange = (e) => { setText(e.target.value); }
: 이벤트가 일어나는 타겟의 value를 text 값으로 업데이트
const onReset = () => { setText(''); }
: text 값을 ''공백으로 업데이트
<input onChange={onChange} value={text} />
: input 태그에 onChange 이벤트를 등록하고 value 값으로 text 상태 값을 준다. value 값을 설정해주지 않으면 상태가 바뀌었을때 input 내용이 업데이트 되지 않는다.
useRef는 저장공간(변수 관리), DOM 요소에 접근을 위해 사용되는 React Hook이다.
1. 저장공간(변수 관리)
State의 변화 ➡ 렌더링 ➡ 컴포넌트 내부 변수들 초기화
Ref의 변화 ➡ 렌더링 ➡ 변수들의 값이 유지됨
State의 변화 ➡ 렌더링 ➡ 그래도 Ref의 값은 유지됨
2. DOM 요소에 접근
대표적으로는 input요소를 클릭하지 않고 포커스를 주고 싶을 때 많이 사용한다. 예를 들어 로그인 화면이 보여줬을 때 id를 넣는 input을 굳이 클릭하지않아도 자동적으로 포커스가 되어있게 해줌.
state를 관리하고 업데이트하는 hook인 useState를 대체할 수 있는 hook이다. 즉, useReducer는 useState처럼 state를 관리하고 업데이트 할 수 있는 hook이다.
useReducer
를 사용하게 되면 컴포넌트와 상태 업데이트 로직을 분리하여 컴포넌트 외부에서도 상태 관리를 할 수 있습니다. 즉, 하나의 컴포넌트 내에서 state를 다루는 로직을 분리하여 외부에서 처리할 수 있도록 해준다.useState
만으로 상태 변화 로직을 만들면, 상태 변화 함수를 컴포넌트 안에서 작성해야 했다. 일반적인 방법이지만 관리해야 하는 상태 값이 많아지고 구조가 복잡해지면 useReducer
를 사용하는게 깔끔할 수 있다.
userReducer
를 사용하면, 컴포넌트 외부에 상태 관리 로직이 있다.
useReducer 문법
const [state, dispatch] = useReducer(reducer, initialState);
state : 컴포넌트에서 사용할 상태 (useState의 state와 동일)
dispatch : dispatch({ type: "descrement" });
reducer : 컴포넌트 외부에서 state 를 업데이트 하는 로직의 함수 ( reducer 함수는 state, action 객체를 인자로 받는다)
initialState : 초기 state (useState의 초기 할당 값과 동일)
reducer()
// reducer 함수 예시
export function reducer(state, action){
//새로운 상태를 만드는 로직
switch(action.type) {
case : "descrement" :
// action의 type이 "decrement"일 때, 현재 state 객체의 number에서 1을 뺀 값을 반환
return state - 1;
case "increment" :
// action의 type이 "increment"일 때, 현재 state 객체의 number에서 1을 더한 값을 반환
return state + 1;
default:
//정의되지않은 action type이 넘어왔을 때는 에러를 발생시킴
throw new Error("Unsupported action type:", action.type);
}
return nextState;
}
https://codesandbox.io/s/usereducer-forked-2twpv5?file=/src/App.js