[useState]
상태 유지 값과 그 값을 갱신하는 함수를 반환합니다.
- 최초로 렌더링을 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자(initialState)의 값과 같습니다.
- setState 함수는 state를 갱신할 때 사용합니다. 새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록합니다.
1. hook를 호출하기
2. 함수 컴포넌트안에 state 추가하기
- 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지될 것입니다.
3. state 변경하는 함수 실행해보기 -> setCount()
- 우리는 이 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있습니다.
- setCount() 는 Class컴포넌트에서 사용했던 this.setState와 비슷하지만 , 이전 state와 새로운 state를 합치지 않는다는 차이점이 있습니다. (useState와 this.state 비교 예시 : https://ko.reactjs.org/docs/hooks-state.html)
[useEffect]
: 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있게 한다.
[시점]
기본적으로 동작은 브라우저의 모든 렌더링이 완료된 후에 수행됩니다만, 어떤 값이 변경되었을 때만 실행되게 할 수도 있습니다.
(브라우저가 화며을 그리기 이전 시점에 동기적으로 시행하려면 useLayoutEffect를 사용)
[사용 이유]
useEffect는 함수 컴포넌트 내에서 side effects 를 수행할 수 있게 해준다. Class컴포넌트에서 사용하는 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것입니다. (useEffect와 이 세 가지 메서드를 비교하는 예시 : https://ko.reactjs.org/docs/hooks-effect.html)
side Effects 란?
React 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업을 이전에도 종종 해보셨을 것입니다. 우리는 이런 모든 동작을 “side effects”(또는 짧게 “effects”)라고 합니다. 왜냐하면 이것은 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서는 구현할 수 없는 작업이기 때문입니다.
[예시1] React가 DOM을 업데이트한 뒤에 문서의 타이틀을 바꾸는 컴포넌트
1. useEffect를 사용하면, React는 DOM을 바꾼 뒤에 “effect” 함수를 실행할 것입니다.
2. Effects는 컴포넌트 안에 선언되어있기 때문에 props와 state에 접근할 수 있습니다.
3. React는 매 렌더링 이후에 effects를 실행합니다 (첫 번째 렌더링도 포함)
[예시2] 친구의 접속 상태를 구독하는 effect를 사용했고, 구독을 해지함으로써 effect 해제
1. 컴포넌트가 unmount될 때 React는 ChatAPI에서 구독을 해지
2. 재렌더링이 일어나 effect를 재실행하기 전에도 마찬가지로 구독을 해지
( 여기서 만약 props.friend.id 가 바뀌지 않았을 때 재구독을 건너뛰도록 설정 가능합니다. 참고 링크 : https://ko.reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects)
[Hook 사용 규칙]
1. 최상위에서만 Hook을 호출해야 합니다. 반복문, 조건믄 ,중첩된 함수 내에서 Hook을 실행하면 안된다.
2. React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 Javascript에서는 Hook을 호출하면 안된다
3. custom Hook 내에서는 호출 가능하다.
이 규칙들을 강제하기 위해 linter plugin을 제공하는데 까다로울순 있으나 Hook이 제대로 동작하기 위해서는 필수적인 조건이다.
https://www.npmjs.com/package/eslint-plugin-react-hooks
[나만의 Hook 만들기]
상태 관련 로직을 컴포넌트 간에 재사용하고 싶은 경우가 생깁니다. 이 문제를 해결하기 위한 전통적인 방법이 두 가지 있었는데, higher-order components와 render props가 바로 그것입니다. Custom Hook은 이들 둘과는 달리 컴포넌트 트리에 새 컴포넌트를 추가하지 않고도 이것을 가능하게 해줍니다.
[예시]
친구의 접속 상태를 구독하기 위해서 useState와 useEffect Hook을 사용한 FriendStatus 컴포넌트 예시를 다시 한번 보겠습니다. 이 로직을 다른 컴포넌트에서도 재사용하고 싶다고 가정을 해봅시다.
이 Hook은 friendID를 인자로 받아서 친구의 접속 상태를 반환합니다.
이것을 여러 컴포넌트에서 사용할 수 있습니다.
각 컴포넌트의 state는 완전히 독립적입니다. Hook은 state 그 자체가 아니라, 상태 관련 로직을 재사용하는 방법입니다. 실제로 각각의 Hook 호출은 완전히 독립된 state를 가집니다. 그래서 심지어는 한 컴포넌트 안에서 같은 custom Hook을 두 번 쓸 수도 있습니다.
Custom Hook은 기능이라기보다는 컨벤션(convention)에 가깝습니다. 이름이 ”use“로 시작하고, 안에서 다른 Hook을 호출한다면 그 함수를 custom Hook이라고 부를 수 있습니다. useSomething이라는 네이밍 컨벤션은 linter 플러그인이 Hook을 인식하고 버그를 찾을 수 있게 해줍니다.
폼 핸들링, 애니메이션, 선언적 구독(declarative subscriptions), 타이머 등 많은 경우에 custom Hook을 사용할 수 있습니다.
[useContext]
: context 객체(React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환합니다
컴포넌트에서 가장 가까운 <MyContext.Provider>가 갱신되면 이 Hook은 그 MyContext provider에게 전달된 가장 최신의 context value를 사용하여 렌더러를 트리거 합니다. 상위 컴포넌트에서 React.memo 또는 shouldComponentUpdate를 사용하더라도 useContext를 사용하고 있는 컴포넌트 자체에서부터 다시 렌더링됩니다.
[useReducer]
useState의 대체 함수입니다. (state, action) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환합니다.
[사용이유]
다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 보통 useState보다 useReducer를 선호합니다. 또한 useReducer는 자세한 업데이트를 트리거 하는 컴포넌트의 성능을 최적화할 수 있게 하는데, 이것은 콜백 대신 dispatch를 전달 할 수 있기 때문입니다.
[useMemo]
: 메모이제이션된 값을 반환합니다.
[시점]
생성함수와 그것의 의존성 값의 배열을 전달해야합니다. useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산 할 것입니다.
[사용이유]
모든 렌더링 시의 고비용 계산을 방지하게 해 줍니다. (성능 최적화)
[useCallback]
: 메모이제이션된 콜백을 반환합니다.
[시점]
메모이제이션된 버전은 콜백의 의존성이 변경되었을 때에만 변경
[사용이유]
불필요한 렌더링을 방지하기 위해 (예로 shouldComponentUpdate를 사용하여) 참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용합니다. (성능 최적화)
(useCallback(fn, deps)은 useMemo(() => fn, deps)와 같습니다.)
[useRef]
DOM접근
[시점]
useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.
[사용이유]
만약 React가 DOM 노드에 ref를 attach하거나 detach할 때 어떤 코드를 실행하고 싶다면 대신 콜백 ref를 사용하세요
공식 Hook 외 유용한 Hook :
ko.reactjs.org/docs/hooks-reference.html#useeffect
Hooks API Reference – React
A JavaScript library for building user interfaces
ko.reactjs.org
https://github.com/rehooks/awesome-react-hooks
rehooks/awesome-react-hooks
Awesome React Hooks. Contribute to rehooks/awesome-react-hooks development by creating an account on GitHub.
github.com
https://nikgraf.github.io/react-hooks/
Collection of React Hooks
nikgraf.github.io
'React > Hook' 카테고리의 다른 글
| React 공식 문서 Hook (1) : Hook 소개 (0) | 2021.03.18 |
|---|
