React Hooks

React Hooks은 리액트의 새로운 기능으로 React 16.8버전에 새로 추가된 기능

1. React hooks

1. useState

const [state , setState] = useState(초기값)

• 상태 유지 값과 그 값을 갱신하는 함수를 반환
• 안정적
• 리렌더링 시에도 변경되지 않음
• 비동기적 작동(state 변경 - 리렌더링 - state 반영)
• 동기적 작동시에는 useEffect 사용
• 비동기적 방법을 해결하기 위해 함수형 업데이트를 사용

  함수형 업데이트
  setState에 값을 그대로 전달하는 것이 아니라 함수를 전달하는 것

 const [num, setNum] = useState(1)
function plus() {
    setNum(num => num + 1)
    setNum(num => num + 1)
    setNum(num => num + 1)
  }
값을 
<button onClick={plus}>PLUS</button> 
에 전달

단, 최적화 문제를 해결하기 위해 다시 useCallback을 사용하여 보내준다.

const handlePlus = useCallback((): void => setNum(prev => prev + 1), []);
<button onClick={handlePlus}>PLUS</button> 

2. useEffect

• 제일 먼저 실행( 마운트 되었을 때 )
• 어떤 값이 변경되었을 때 실행 ( 업데이트 되었을 때 )
  • 두번째 인자 배열에 값이 없을 경우 마운트 되었을 때만 실행
• 사라질 때 ( 언마운트 되었을 때 )

  useEffect(() => {
    console.log('마운트 되었을 때');
    return () => {
      console.log('언마운트 되었을 때');
    };
  }, [업데이트 되었을 때]);

3. useCallback

//ex
const memoizedCallback = useCallback(함수, 배열);
///
const add = () => x + y;
const add = useCallback(() => x + y, [x, y]);

• 함수를 재사용 할 때 사용
• 함수 전용 메모이제이션
• 첫번째 인자로 함수 , 두번째 인자로 배열 내의 값이 변경될 때까지 저장해 놓고 재사용
• 부모 컴포넌트가 렌더링 될 때마다 리렌더링되는 것을 막아 최적화를 시켜준다. 단, 부분별한 사용은 오히려 성능을 저하 시킨다.

4. useMemo

Memo는 Memoized를 의미
이전에 계산한 값을 재사용한다는 의미

function countActiveUsers(users) {
  console.log('활성 사용자 수를 세는중...');
  return users.filter(user => user.active).length;
}

  const [users, setUsers] = useState([
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com',
      active: true
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com',
      active: false
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com',
      active: false
    }
  ]);

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

• 첫번째 파라미터에 어떻게 연산할지 정의하는 함수
• 두번째 파라미터에는 deps 배열을 넣어주어 배열 안에 넣은 내용이 바뀌면, 우리가 등록한 함수를 호출해서 연산. 바뀌지 않으면 값을 재사용

출처) https://react.vlpt.us/basic/17-useMemo.html

5. useRef

• DOM Selector 함수인 getElementById, querySelector과 같은 기능

• DOM을 직접 선택해야 하는 상황에서 사용

• 바람직한 사용

  • 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
  • 애니메이션을 직접적으로 실행시킬 때.
  • 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

const select = useRef()
<input ref={select} type="text /> 

console.log(select.current.0000)

• useRef는 내용이 변경될 때 그것을 알려주지않음
  => 리렌더링을 발생시키지 않는다
  => 프로젝트 때 계속 undefied가 뜬 이유

해결책 => callback ref를 사용하자

  const [scrollY, setScrollY] = useState(0);
  const scrollHeight = useRef();

  useEffect(() => {   setScrollY(scrollHeight.current.offsetY);
      // mount 되고 난 뒤의 시점이니까 catContainerRef.current의 값이 업데이트 된 상태
  }, [])

<div ref={scrollHeight}>