React Hooks

리액트팀에서도 훅과 관련된 개발을 적극적으로 하고 있고 현재 새롭게 만들어지는 컴포넌트에 대해서 함수형으로 선언하는게 대세인데 여기에 리액트 훅이 한 몫하고 있다. 

 

1. useState

• 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다.
• 예) const [value, setValue] = useState('initial data');
• 리턴 배열의 첫 번째는 상태값, 두 번째는 상태를 설정하는 값

 

2. useEffect

• 렌더링될 때마다 특정 작업을 수행할 수 있도록 설정할  수 있는 Hook
• 기본적으로 렌더링되고 난 직후마다 실행됨
• 클래스형 컴포넌트의 componentDidMount, componentDidUpdate를 합친 형태
• 마운트만 실행하고 싶을 때는 두 번째 파라미터에 '[]' 비어 있는 배열을 넣어주면 됨
• 특정 값이 업데이트될 때만 실행하고 싶을 때는 두 번쨰 파라미터에 특정 값을 배열 형태로 넘겨주면 된다.
• 두번째 파라미터에
• []를 입력하면 마운트시에만 실행되고 함수를 반환하면 해당 함수는 언마운트 때 실행됨
• []안에 특정 값을 넣으면 마운트시, 특정값이 수정될때 호출, 함수를 반환하면 해당함수는 언마운트, 값이 바뀌기전 호출
• []를 생략하면 마운트, 리렌더링 될 떄 마다 실행됨
• 첫 번째 파라미터에 적용되는 함수에서 사용하는 state 값이 있다면 []에 명시해 주는게 정석(?)
• 기본적으로 부모가 리렌더링되면 자식도 리렌더링
• DOM이 변화가 반영되는 내용은 해당 컴포넌트에만 해당되지만 Virtual DOM은 모든 걸 렌더링 한다.
• 여기에 등록하는 함수는 async로 작성하면 안되고 함수안에 async 함수를 따로 만들어줘야한다.

 

3. useReducer

• useState 보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 훅
• 현재 상태, 업데이트를 위해 필요한 정보를 담은 액션값을 전달 받아 새로운 상태를 반환하는 함수
• useReducer의 첫 번째 파라미터에는 reducer 함수, 두 번째 파라미터에는 해당 리듀서의 기본 값
• 예) const [state(현재 state), dispatch(action 발생시키는 함수)] = useReducer(<reducer 함수명>, <{ 기본 값 }>)
• 컴포넌트 업데이트 로직을 바깥으로 뺄 수 있는 장점이 있음

 

4. useMemo

• 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.
• 렌더링 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식

 

5. useCallback

• useMemo와 비슷하다.
• 이벤트 핸들러 함수를 필요할 때만 생성할 수 있다.

 

6. useRef

• 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있게 지원해주는 함수