Hooks란?
- Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다.
useState
- useState는 가장 기본적인 Hook
- 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 됩니다.
- const [value, setValue] = useState(0);
- useState 함수의 파라미터에는 상태의 기본값을 넣어 줍니다. 현재 0을 넣어 주었는데, 결국 카운터의 기본값을 0으로 설정하겠다는 의미
- 이 함수가 호출되면 배열을 반환하는데요. 그 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수
- 첫 번째 인자로 현재 상태, 두 번째 인자로 상태를 바꾸는 함수
- 상태를 변화시킬 땐 항상 불변성 유지
useEffect
- 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행
- 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태
- 마운트될 때만 실행하고 싶을 때
- useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행하고,
- 업데이트될 때는 실행하지 않으려면 함수의 두 번째 파라미터로 비어 있는 배열을 넣어 주면 됩니다.
- 특정 값이 업데이트될 때만 실행하고 싶을 때
- useEffect의 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어 주면 됩니다.
- useEffect(() => { console.log(name); }, [name]);
뒷정리 함수
- 컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리(cleanup) 함수를 반환해 주어야 합니다.
- 언마운트, 업데이트를 하기위해 부모 컴포넌트 가시성 추가
- import React, { useState } from 'react'; import Info from './Info'; const App = () => { const [visible, setVisible] = useState(false); return ( <div> <button onClick={() => { setVisible(!visible); }} > {visible ? '숨기기' : '보이기'} </button> <hr /> {visible && <Info />} </div> ); };
- 뒷정리함수 적용
- 일반 상황 1 : 마운트되어서 Info 컴포넌트가 보일 때
- 일반 상황 2 : 정보가 업데이트될 때. (useEffect 두 번째 인자에 따라 다름)
- 뒷정리 함수 1 : 언마운트 되어서 숨기려할 때
- 뒷정리 함수 2 : 업데이트 되기 직전에. 즉 input에 값 입력해도 업데이트 직전인 상황나옴. 리액트 -> 리액ㅌ'. (useEffect 두 번째 인자에 따라 다름)
- useEffect(() => { console.log('일반 상황1 -> 마운트되어서 Info 컴포넌트가 보일 때'); console.log('일반 상황2 -> 정보가 업데이트 될 때'); return () => { console.log('뒷정리 함수 상황1 : 언마운트 되어서 숨기려할 때'); console.log( '뒷정리 함수 상황2 -> 업데이트 되기 직전에. 즉 input에 값 입력해도 업데이트 직전인 상황나옴. 리액트 -> 리액ㅌ' ); console.log('상황 2는 2번째 배열에 값에 따라 달라짐'); }; }, [name]);
useReducer
- useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook입니다.
- 리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달받아 새로운 상태를 반환하는 함수입니다.
- 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야 합니다.
- 어떤 action인지 알려주는 type 필드 필요
- • 지금까지는 onClick 이벤트 같은 누르는 상황에만 값을 업데이트 했음.
- 컴포넌트 외부에 함수로 설정
- useReducer의 가장 큰 장점 : 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낸다.
function reducer(state, action) {
switch (action.type) {
case 'INCREASE':
return { value: state.value + 1 };
case 'DECREASE':
return { value: state.value - 1 };
default:
return state;
}
}
- 컴포넌트 외부에 함수로 설정
- useReducer의 가장 큰 장점 : 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낸다.
- 해당 리듀서의 기본값을 return
const [state, dispatch] = useReducer(reducer, { value: 0 });
- state는 현재 가리키고 있는 상태.
- dispatch는 액션을 발생시키는 함수
- useReducer(reducer, {value: 0}) : reducer는 바깥의 reducer 함수. value는 해당 reducer의 기본값
<button onClick={() => dispatch({ type: 'INCREASE' })}>+1</button>
<button onClick={() => dispatch({ type: 'DECREASE' })}>-1</button>
- dispatch 함수 안에 파라미터로 타입을 넣어주면 리듀서 함수가 호출된다.
- 인풋 상태 관리하기
- reducer 함수
- spread 연산자 이용해 state 복사 ( 불변성 유지 )
- action으로 e.target 타입 받아와 객체 안에 key를 []로 감싸 자체로 key를 만듬
- 컴포넌트
- name, value 값 설정 후, e.target 자체를 dispatch의 타입으로 전달
function reducer(state, action) {
return {
...state,
[action.name]: action.value,
};
}
const Info = () => {
const [state, dispatch] = useReducer(reducer, {
name: '',
nickname: '',
});
const { name, nickname } = state;
const onChange = (e) => {
dispatch(e.target);
};
return (
<div><input
name="name"value={name}
onChange={onChange}
/><input
name="nickname"value={nickname}
onChange={onChange}
/></div>
};