React Hooks 메모 +6/30 추가

React Hook

React v16.8 2019년 2월
recompose 라이브러리가 리액트에 인수되고 Hook이 release되었다.
코드를 보다 간결하게 작성할 수 있게 되었다.

---> class component에 벗어나서 함수 컴포넌트 생성이 가능해졌다.

const [ ... , ... ] = useState(state 초기값)
//배열을 리턴한다
//첫번째 요소는 state 변수
//두번째 요소는 state 변경 함수

useEffect( ... , ... )
//첫번째 인자: function으로서의 effect
//두번째 인자: dependency
//deps가 변할 때만 function이 실행된다.

Lifecycle

리액트 component의 생명주기

mounting: constructor 실행, useMemo useEffect /render
updating: state 변경, useState useEffect /render
unmounting: useEffect의 cleanup function 실행

컴포넌트는 시간에 따라 생성되고, 업데이트 되다가, 사라진다.

Hook의 종류

• state 관련 함수

useState
상태를 변경하기 위한 함수
state: 자바스크립트의 객체
렌더링이나 데이터 흐름에 사용되는 값만 state로 선언해야 한다.
변수 각각에 대해 상태 변경 함수가 존재한다.
상태 변경 함수를 통해서만 상태를 변경해야 한다.

• Lifecycle 관련 함수

useEffect

useEffect(이펙트 함수, 의존성 배열) //배열 요소가 1개라도 바뀌면 함수 실행
//이펙트 함수가 함수를 리턴하면 unmount시에 실행된다.

side effect를 다루기 위한 함수
의존성 배열이 빈 배열이면 mount, unmount시에 렌더링 된다.
의존성 배열이 없으면 업데이트 될 때마다 렌더링 됨

• 최적화 관련 함수

useMemo
memoized value를 return하는 함수
memoization = 함수 호출 결과를 저장한다.

const memo = useMemo(() => {
  //func: 연산량이 높은 작업을 수행하여 결과를 반환한다.
  return func(의존성 변수1, 의존성 변수2);
}, [의존성 변수1, 의존성 변수2]);

첫 번째 인자: 함수 --> 렌더링이 일어나는 동안 함수를 실행한다.
두 번째 인자: 의존성 배열 --> 의존성 배열의 변수가 업데이트 됐을 때만 새로운 함수 실행
빈 배열일 경우 mount시에만 호출됨

useCallback
결과값이 아닌 함수 자체를 저장하는 함수

const callBack = useCallback(() => {
  return func(의존성 변수1, 의존성 변수2);
}, [의존성 변수1, 의존성 변수2]);

++

useRef
Reference를 사용하기 위한 hook
특정 컴포넌트에 접근할 수 있는 객체 Ref
레퍼런스저장변수.current: 현재 참조하는 element

const refContainer = useRef(초기값);
//접근하려는 element에 ref={refContainer} 속성을 추가해야 함

리렌더링 되어도 항상 같은 레퍼런스 객체를 반환한다.
내부의 데이터가 변경되었을 때에도 렌더링 x ---> Callback ref 사용으로 가능

https://www.youtube.com/watch?v=oTA6RRqIzfQ