react hook 정리

[YeonjuOHYE]

custom hook 이란

자바스크립트 function :

• 이름이 use로 시작
• 그리고 다른 hook을 호출하는

※ 주의

• 같은 custom hook을 사용하는 두 컴포넌트들은 state를 공유하는가? NO

TIP

• hook들 간의 정보 공유

  
  const friendList = [
  { id: 1, name: 'Phoebe' },
  { id: 2, name: 'Rachel' },
  { id: 3, name: 'Ross' },
  ];

function ChatRecipientPicker() { const [recipientID, setRecipientID] = useState(1); const isRecipientOnline = useFriendStatus(recipientID);

return ( <> <Circle color={isRecipientOnline ? 'green' : 'red'} /> <select value={recipientID} onChange={e => setRecipientID(Number(e.target.value))}

{friendList.map(friend => (

{friend.name}

))} </> ); }

## useReducer 
```javascript
const [state, dispatch] = useReducer(reducer, initialArg, init);

useReducer의 reducer는 state값을 처리하여 반환하는 함수인 dispatch와 반환하는 값에 해당하는 state를 return 한다.

const [state, dispatch] = useReducer(reducer, initialArg, init);

세번째 인자인 init을 사용하면, reducer안에서도 사용할 수 있고

   case 'reset':
      return init(action.payload);

초기화 시에, initailArg를 init()한 결과를 초기값을 가진다

useMemo, useCallback

useRef

그냥 ref랑 차이가 뭐야

useImperativeHandle

useLayoutEffect