더블리의 12층

* useState
* const [name, setName] = useState(‘’);
* useEffect
* componentDidMount + componentDidUpdate
* useEffect은 함수를 컴포넌트가 화면에 맨 처음 렌더링될때만 실행
* 두번째 파라미터로 비어있는 배열을 넣어주면 업데이트될때 수행되지 않는다.
* 특정 값이 변경될 때만 호출하고 싶은 경우는 두번째 파라미터로 넘긴다.
* 특정값을 변경하는 코드를 함께 넣고, 두번째 파라미터에서 특정값이 변경될때 호출하면 무한으로 useEffet가 호출됨
* 업데이트 되기 직전이나, 언마운트 되기 전에 작업을 수행하고 싶으면 return () => { .. cleanup } 함수를 반환한다.
* useReducer
* 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을때 사용
* 현재 상태, 업데이트를 위해 필요한 정보를 담는 action값을 전달받아 새로운 상태를 반환하는 함수
* 새로운 상태를 만들 때는 반드시 불변성을 유지?
* 액션 객체는 반드시 type을 지니고 있을 필요가 없다. (문자열, 숫자 상관없음)
* 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다.
* event.target 을 사용하면 action.name을 state로 사용을 할 수 있다.
* reducer에 return { ...state , [action.name]: action.value }}

function reducer(state, action) {
switch (action.type) {
case "INCREMENT":
return {value: state.value + 1}

...
}
}

const [state, dispatch] = useReducer(reducer, {value:0}); // 두번째 파라미터에는 해당 리듀서의 기본값
// state는 현재 가리키고 있는 상태, dispatch는 액션을 발생시키는 함수
onClick => dispatch({type: 'INCREMENT'})}

* useMemo
* 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용
* 값을 재사용(숫자, 문자열, 객체)
* const avg = useMemo(() => getAverage(list), [list]);
* useCallback
* 함수를 재사용
* useMemo와 유사하게 주로 렌더링 성능을 최적화해야 하는 상황에서 사용
* 컴포넌트가 리렌더링 될때마다 함수들이 새로생기기 때문에 useCallback을 이용
* 함수에 useCallBack을 추가해서 컴포넌트가 처음 렌더링될때만 함수 생성 or 특정 값이 변경되었을때만 함수생성(=useEffect와 유사함)
* useRef
* 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해준다.
* 예) 컴포넌트에서 특정 버튼을 눌렀을때 input에 포커스를 가게 하기
* inputEl = useRef(null); <input ref={inputEl} /> inputEl.current.focus()
* 컴포넌트 로컬 변수로 사용 (로컬변수는 렌더링과 상관없이 바뀔수 있는 값) 클래스에서 사용했던 로컬변수를 함수형으로 컴포넌트를 선언하기 위해서
* id = useRef(1), setId = (n) => { id.current = n; } printId = () => {console.log(id.current}
* CustomHooks
* https://github.com/rehooks/awesome-react-hooks
* https://nikgraf.github.io/react-hooks