Hook이란?

• 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 사용 할 수 있게 해주는 함수
• useState를 이용하여 함수형 컴포넌트에서도 상태 변수 선언 가능
• useEffect를 이용하여 라이프 사이클 관리 가능
• 최상위(at the Top Level)에서만 Hook을 호출 (반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출X)
• 오직 React 함수 내에서 Hook을 호출 (일반적인 JavaScript 함수에서 호출X)

---

useState

• const [ 상태이름, 상태를 변경할 함수 이름(속성값) ] = useState(초기값);
• 상태(동적인 값)를 관리할 때 사용한다.
• 값을 변경할 때 절대 상태를 직접 변경하는 것이 아닌 상태변경 함수에 값을 전달하는 방식으로 변경한다.
• 보편적으로 컴포넌트 함수 상단에서 정의
• useState() Hook의 인자로 넘겨주는 값은 state의 초기 값
• 여러 개의 state 변수 사용 가능 ( 하나의 state 변수에 객체와 배열을 갖고 연관 데이터를 묶어도 됨 )
• state에서 객체를 수정할 때는 직접 수정하면 안되고, 새로운 객체를 만들어서 객체에 변화를 주는 식으로 사용.
• (기존 상태에 직접 접근해서 수정하면, 값이 바뀌어도 리렌더링 되지 않는다)

 

---

useEffect

• useEffect (function, deps)   * function: 수행하고자 하는 작업 / deps: 배열 형태, 검사하고자 하는 특정 값 또는 빈 배열
• 컴포넌트가 렌더링 될 때 마다 특정 작업 실행 => 마운트/언마운트/업데이트시 할 작업 설정할 때 사용
• side effect 수행
• React가 DOM을 업데이트하고 난 이후 effect를 수행 (렌더링 결과가 실제 돔에 반영된 후 호출 됨)
• 보편적으로 컴포넌트 함수 하단에서 정의
• 훅의 두번째 매개변수로 배열을 입력하면, 배열의 값이 변경되는 경우에만 호출.

빈 배열일 시, 처음 렌더링 될 때만 실행, 배열을 생략한다면 리렌더링 될 때 마다 실행 useEffect 안에서 사용하는 상태나 props가 있다면 deps에 넣어야 함, 넣지 않는다면 함수가 실행될 때 최신 상태를 가리키지 않음.

 

* side effect : 함수 실행 시 함수 외부의 상태를 변경하는 연산,

  (Api 호출, 이벤트 처리 함수 등록 및 해제, 데이터 가져오기, 구독 설정하기, 수동으로 React 컴포넌트의 DOM 수정..)

---

useRef

• const name = useRef();
• 컴포넌트 내부에서 생성되는 값 중 렌더링과 무관한 값을 저장할 때 -> 변수가 업데이트 되어도 컴포넌트가 리렌더링 되지 않음
• 특정 DOM을 선택할 때 사용

---

useMemo

• const name = useMemo(() => sortName(names), [names] );
• 첫번째 인수에는 함수, 두번째 인수에는 배열
• 두번째 인수에 넣어준 배열의 값이 바뀔 때만 함수가 실행, 아니면 이전의 값 재 사용
• 이전에 계산한 값을 재사용 할 때

---

useCallback

• useMemo를 기반으로 만들어 짐
• 특정 함수를 재사용 하고 싶을 때
• const function = useCallback( … );

---

useReducer

• const[state, dispatch] = useReducer( reducer, initialState );
• = const[컴포넌트에서 사용할 수 있는 상태, 액션을 발생시키는 함수] = useReducer(리듀서함수, 초기상태);
• 컴포넌트의 상태 값을 리덕스처럼 관리 ( 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리 )
• 상위 컴포넌트에서 트리의 깊은 곳에 있는 자식 컴포넌트에 이벤트 처리 함수 쉽게 전달 가능
• 단순한 값을 관리할 때는 useState를 사용하고, 복잡한 로직이나 여러 값을 관리할 때에는 useReducer 사용
• 리덕스는 dispatch를 통해 state가 동기적으로 변경, useReducer는 비동기적으로 변경