1. Hooks
Hooks를 처음 접했을 때
함수형 component에서도class형 component처럼 상태관리가 가능하게 만들어진 기능이다.
class형 component에서 사용되는Lifecycle method같은 기능을 하는것도 있고,state를 관리하는 기능도 있다.
class형 component를 공부할때는Lifecycle method의 종류가 많아서 이것을 다 알아야하는건가 하는 생각을 했었는데함수형 component에서도 그에 못지 않은 기능들이 있어서 공부를 하는데 까다로운 느낌이었다.
2. useState
가장 대표적인
Hook이다.state값을 설정하고 그것을 set하는 함수를 설정해서 사용한다. 기능상으로는class형component와 크게 다른점은 없어보이지만 각각의state와setState함수를 따로 정의해서 사용할 수 있다.const [state, setState] = useState('');위와 같은 형식으로 정의해서 사용한다.
배열 첫번째에 관리할state값의 변수 이름을 선언하고, 두번째에는setState함수 이름을 설정한다. 함수 앞에 set만 붙여서 어떤 값의 상태를 관리하는 함수인지 명시해주는게 편하다.
useState괄호 안에는state의 초기값을 설정해서 사용해준다.
3. useEffect
useEffect 사용
component가 렌더링 될 때 마다 작업을 수행할 수 있게 해주는Hook이다.class형component에서componentDidMount와componentDidUpate를 합친 형태와 비슷하다.useEffect(() => { // 작업할 내용 });형태는 위처럼 사용하면 된다.
만약 특정값만 변경될 때 리렌더링 되게 하고 싶으면 아래와 같이 사용해주면 된다.useEffect(() => { console.log(id, name); }, [name])
이처럼 적용하면state값중 name이 변경될 때 마다 리렌더링이된다.
배열안에 값을 안 넣고 []로 빈 배열만 넣어주면 처음 렌더링될 때만useEffect안의 내용이 실행된다.테스트를 하다가
fetch를 이용해json데이터같은걸 불러올 때useEffect두번째 인자로 배열을 안놓고 화살표함수만 인자로 내용을setState를 넣어뒀더니useEffect가 계속 작동해서 두번째 인자로 []를 넣어서 처음에만 호출되게 바꿨던 기억이 있다.
clean up
useEffect는 렌더링 된 직후에 실행된다.
렌더링 되기 직전에 다른 작업을 하고 싶으면useEffect에 return으로 함수를 반환해주면 된다. 이 때return되는 함수가 clean up 함수이다.useEffect(() => { console.log(id); return () => { console.log(name); } }, [name])
id값을 먼저 입력하고, name이 변경될 때마다useEffect가 호출된다.console창에 보이는것과 같이 name을 타이핑 하는데 name이 변경되서 리렌더링이 되는데 리렌더링이 되기전에console을 먼저 출력해서 name의 빈 값이 찍히고 id가 찍힌다.
이 과정이 name을 타이핑하는동안 반복되었다.
3. useReducer
- 전에 혼자
React를 공부할 때Redux에서Reducer를 사용하는것을 따라해봤는데 개념이 바로 와닿지 않아서 고생했던 기억이 있다. 물론 지금도 개념정도만 어느정도 알고 있다.
Hook에도Reducer기능이 있어서 한번 보려고한다.
Reducer는 현재 상태, 업데이트를 위해 필요한 정보를 담은 action값을 전달받아 새로운 상태를 반환하는 함수이다. 중요한 것은 새로운 상태를 만들 때 불변성을 지키는 것이다.
- 그냥 설명만 봐서는 잘 모르겠다. 예제를 보면서 이해해보도록 해야겠다.
import React from 'react'; import { useReducer } from 'react'; function reducer(state, action){ switch(action.type){ case 'INCREASE': return {num: state.num + 1}; case 'DECREASE': return {num: state.num - 1}; default: return state; } } const HookTest2 = () => { const [state, dispatch] = useReducer(reducer, {num: 0}); return ( <div> <button onClick={() => dispatch({type: 'INCREASE'})}>+1</button> <button onClick={() => dispatch({type: 'DECREASE'})}>-1</button> <div>{state.num}</div> </div> ); }; export default HookTest2;코드만 보면 구조가 이상해 보인다.
실행 순서를 차례대로 살펴본다.
1.useReducer에는reducer함수와reducer의 기본값을 넣어준다. 위에서는reducer함수는 reducer이고 기본값은 {num: 0}이다.
2. 현재 상태는 state에 저장되고, dispatch를 통해 액션을 발생 시키려고 위처럼 선언했다.
3.button을 클릭할 때dispatch에type과value를 담은 객체를 보낸다.
4. reducer 함수에서 상태값state와 액션을 확인하는action을 매개변수로 받는다.
5. 버튼을 눌렀을 때action의type을 담아서 보낸걸로 값을 확인하고, switch문을 이용해 상태 변화값을 return해준다.
Reducer의 사용을 한번 따라가보는데도 복잡한 느낌이다.Redux를 사용할 때 자주 쓰이므로 미리 사용법을 잘 익혀놓으면 좋겠지만 잘 사용할 수 있을지 모르겠다. 계속 연습해봐야겠다.
