- 커스텀 Hooks : 컴포넌트의 반복 로직이 발생해 재사용하기 위해 기존 Hooks들을 이용해 원하는 기능으로 제작 import { useState, useCallback } from 'react'; function useInputs(initialForm) { const [form, setForm] = useState(initialForm); // change const onChange = useCallback(e => { const { name, value } = e.target; setForm(form => ({ ...form, [name]: value })); }, []); const reset = useCallback(() => setForm(initialForm), [initialForm])..

- reducer : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 - useReducer : const [state, dispatch] = useReducer(reducer, initialState); reducer는 dispatch에서 액션을 발생시켰을 때 실행될 함수, initialState는 state의 초기 상태 import React, { useReducer } from 'react'; function reducer(state, action) { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } } fu..

- React.memo : 필요시에만 리렌더링을 요청하는 성능 최적화를 위한 함수, 두번째 파라미터에서 propsAreEqual 이라는 함수를 사용하여 특정 값들만 비교를 하는 것도 가능 ex> export default React.memo(Component)

- useCallback : useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다. const nextId = useRef(4); const onCreate = useCallback(() => { const user = { id: nextId.current, username, email }; setUsers(users.concat(user)); setInputs({ username: '', email: '' }); nextId.current += 1; }, [users, username, email]); const onRemove = useCallback( id => { // user.id 가 파라미터로 일치하지..

- useMemo : 성능 최적화를 위해 연산된 값을 저장하는 훅으로, useMemo 의 첫번째 파라미터에는 어떻게 연산할지 정의하는 함수를 넣어주면 되고 두번째 파라미터에는 deps 배열을 넣어주면 되는데, 이 배열 안에 넣은 내용이 바뀌면, 우리가 등록한 함수를 호출해서 값을 연산해주고, 만약에 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용하게 됩니다. const count = useMemo(() => countActiveUsers(users), [users]);

- useEffect : useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣습니다. 만약에 deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출됩니다. 그리고, useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup 함수라고 부릅니다. cleanup 함수는 useEffect 에 대한 뒷정리를 해준다고 이해하시면 되는데요, deps 가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출됩니다. 주로, 마운트 시에 하는 작업들은 다음과 같은 사항들이 있습니다. props 로 받은 값을 컴포넌트의 로컬 상태로 설정 외부 API 요청 (REST API 등) 라이..