리액트 훅(React Hook) - 1

리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 

(이전에는 상태를 관리하기 위해 class 기반 컴포넌트를 작성해야 했다. => 함수형에 비해 유지보수 복잡)

 

※ 왜 class형 컴포넌트를 쓰지 않고 Hook과 함수형 컴포넌트를 쓸까?

class형 컴포넌트의 길어지는 코드 길이 문제, 중복 코드, 가독성 문제 등을 해결하기 위해

---

useState

• React에서 import
• 컴포넌트에서 상태를 관리
• const [data, setData] = useState(data의 초기값) 

// 원래는 이런 형태지만 배열 비구조화 할당을 통하여 각 원소를 추출해준 것

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

• useState 함수를 호출하면 배열을 반환하는데, 첫번째 원소는 현재 상태의 값이고 두번째 원소는 상태값을 갱신해주는 Setter 함수
• useState() 괄호안의 값은 상태의 초기값

---

useRef

• React에서 import
• 특정 DOM을 선택할 때 사용
• useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 선택하고 싶은 DOM 에 ref 값으로 설정 => Ref 객체의 .current 값은 원하는 DOM 을 가르킴

---

useEffect

• React에서 import
• 컴포넌트의 라이프사이클(mount, update, unmount)을 컨트롤

useEffect ( () => { } );  // 재렌더링 마다 코드실행
useEffect ( () => { } , [ ] ); // mount 시 코드실행
useEffect ( () => { } , [ state ] ); // 특정 state 변경시에만 코드 실행
useEffect ( () => { return()=>{} } , [ ] ); // unmount 시 코드 실행

// Callback 함수
// Dependency Array ( 의존성 배열 / 뎁스) 
// 의존성 배열내에 들어있는 값이 변화하면 콜백함수가 수행된다.

---

useMemo

Memoization : 이미 계산해 본 연산 결과를 기억해두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억해두었던 데이터를 반환시키게 하는 방법

• React에서 import
• Memoization 하고 싶은 함수를 감싸서 최적화
• 함수를 전달받아서 그 함수가 리턴하는 값을 리턴하기 때문에 다른 곳에서 쓸 때는 함수로 쓰는게 아니라 값으로 사용

  const Example = useMemo(() => {
   // 함수내용
  }, [data]); // data 가 변할때만 함수 재실행

  const value = Example;
  // cosnt value = Example() <- 이렇게 쓰면 안됨

 

useMemo는 연산결과(함수)를 재사용 /  React.memo는 컴포넌트를 재사용

---

useCallback

• React에서 import
• Memoization 된 콜백함수를 반환
• 함수는 현재 state 값을 참조할 수 있어야 하기 때문에 컴포넌트가 재생성될 때 다시 생성되는 것이므로, Dependency Array 를 빈배열로 전달하면 문제가 생길 수 있음 ⇒ setState( ( )=> { } )
  (setStat함수에 인자로 함수를 전달하여 최신의 state를 참조할 수 있게 해야함) 

  const example = useCallback(() => {
	// 함수내용
  }, []);