Hook 종류
useState
useRef
useEffect
useMemo
useCallback
useReducer
useState
가장 기본적인 hook
...
// name => 앞으로 사용할 상태(변수같은 개념)
// setName => name을 변경할때 사용하는 함수
const [name, setName] = useState('');
...useState('') → 이렇게 작성하면 name의 값이 ''으로 초기화 된다.
useRef
보통 input태그의 값을 접근하거나 DOM요소에 이름을 달 때는 id를 사용하지만 리액트에서는 ref를 사용한다.
이유 : id는 고유한 값이어야 하는데 리액트에서 컴포넌트를 재사용 하다보면 id값이 중복되는 경우가 발생한다. ref는 컴포넌트 내부에서만 작동하기 때문에 이런 일이 생기지 않는다.
// ref 만들기
const inputEl = useRef(null);
...
// ref 붙은 컴포넌트에 접근하기
const onInsert = useCallback(()=>{
...
inputEl.current.focus(); // ref값이 inputEl인 태그에 접근하여 focus()를 한다.
}, [number,list]);
...
// ref 붙여주기
return(
...
<input value={number} onChange={onChange} ref={inputEl}/>
<button onClick={onInsert}>등록</button>
...결론 : DOM요소에 직접적으로 접근해야 할 경우(input에 포커스 주기, 스크롤 박스 조작하기, Canvas에 그림그리기 등) id대신 ref를 사용한다
주의 : 서로 다른 컴포넌트끼리 데이터 교류할 때 ref를 사용하는건 잘못된 사용법이다. 데이터는 부모와 자식 컴포넌트 사이에서만 전달되야한다
...
const id = useRef(1);
...
console.log(id.current);
이런식으로 렌더링에 관련되지 않은 로컬변수를 만들 수 있다
useEffect
...
const [name, setName] = useState('');
useEffect(등록한 함수,[변경을 감지할 값]);
...- useEffect는 [ ]안에 있는 값들이 변경될때, 컴포넌트가 마운트 될 때 마다 '등록한 함수'를 실행한다
- 만약 [ ]안에 아무것도 없다면 컴포넌트가 마운트 될때만 실행된다
- 만약 '등록한 함수'에서 함수(이를 뒷정리 함수라고 한다)를 반환하고 [ ]에 값이 존재하면 컴포넌트가 언마운트 될때와 업데이트 직전에 반환한 함수를 실행한다
- 뒷정리 함수가 있고 [ ]에 아무것도 없다면 컴포넌트가 언마운트 될때만 '등록한 함수'를 실행한다
- []이거 조차 없다면 컴포넌트가 리렌더링 될때마다 실행된다
useMemo
함수 컴포넌트 내부에서 발생하는 연산을 최적화 할때 사용
값이 바뀌지 않았다면 이전 값을 그대로 사용한다
...
const [name, setName] = useState('');
const [nickname, setNickname] = useState('');
const newName = useMemo(복잡한 연산의 함수1,[name]);
const newNickname = useMemo(복잡한 연산의 함수2,[nickname]);
....
<p> {newName}</p>
<p> {newNickname}</p>이런식으로 작성하면
name이 변경되면 '복잡한 연산의 함수1'을 실행하고 nickname이 변경되면 '복잡한 연산의 함수2'가 실행된다.
useCallback
주로 렌더링 성능을 최적화 할때 사용
const onInsert = useCallback(함수,[값1, 값2]);
값1과 값2가 바뀌었을때만 함수를 생성한다.
Q. 왜 '실행'이 아니라 '생성' 인가?
보통의 경우 컴포넌트 안에 선언된 변수, 함수는 컴포넌트가 다시 렌더링 될때마다 새로 선언되고 생성된다 → 컴포넌트 내부의 어떠한 변수(아무거나)가 바뀌어도 함수가 다시 생성된다
따라서 우리는 상관있는 변수와 함수만 엮어서 해당 변수가 바뀌었을 때만 함수를 다시 생성하기 위해 useCallback을 사용하는 것이다.
useReducer
다양한 state값에 따라 다른 로직을 수행하고 싶을때 사용
function reducer(state, action){
switch(action.type){
case '타입1':
return {value:state.value + 1};
...
default:
// 아무것도 해당안되는 경우 기존 상태 반환
return state;
}
}
...
const [state, dispatch] = useReducer(reducer, {value:0});
return(
...
<button onClick={()=>dispatch({type: '타입1'})}>+1</button>
...
useReducer : 초기 state값을 지정하고 dispatch와 reducer를 연결한다.
reducer : 액션 타입에 따라 state값을 바꾸는 함수다 dispatch에 의해 실행된다.
dispatch : reducer에 액션 타입을 넘겨주고 reducer를 실행하게 한다.
