[React] 리액트 Hooks

React Hooks

useState

---

컴포넌트의 상태를 관리해줌.

state : 컴포넌트의 동적인 값

useRef

---

• 함수형 컴포넌트에서 쓰임
• 클래스형 컴포넌트에서는 콜백함수 or React.createRef 라는 함수를 씀
• .current 값으로 원하는 DOM을 가르킬 수 있음

useEffect

---

1. deps 에 빈 배열을 넣을 때

   • 마운트

     useEffect(()=>{
         console.log('마운트');
         return () => {
           console.log('언마운트');  
         };
     }, [])//빈배열

     • 컴포넌트가 마운트 되었을 때 콘솔에 마운트가 올라감.
     • 첫번째 파라미터에는 함수, 두번째 파라미터에는 배열을 넣는데, 빈 배열 [] 을 집어넣으면 컴포넌트가 처음 나타날때에만 useEffect 함수가 호출된다.

   • 언마운트

     • 배열이 비어있을 때( [] 일때), 컴포넌트가 사라질 때 return 안에 있는 함수가 호출된다. 이것을 cleanup 함수라고 부름.

2. deps 에 값을 넣을 때

   • deps 에 값을 넣게 되면 컴포넌트가 처음 마운트 될때와 넣은 값이 바뀌었을 때 호출 된다.
   • useEffect 안에서 사용하는 상태나, props가 있으면 deps에 값 넣어주기

3. deps 에 값을 아예 안넣어줄 때

   • 컴포넌트가 리렌더링 될 때마다 호출

useMemo

---

• 이전 값 재 사용한다는 의미

  const count = useMemo(()=> countActiveUsers(users), [users])

  [] 안에 들어간 값이 바뀔 때만 새로 계산한다.

useCallback

---

• 특정 함수를 새로 만들지 않고 재사용 하고 싶을 때 사용한다.