[React] Hooks 와 use....

기존 component에 대한 설명을 다시 돌려보면 아래와 같은 나타난다

1. Hooks 란?

• Function Component가 Class Component의 기능을 모두 사용할 수 있게 해주는 것
• 모든 Hooks 이 사용하는 함수는 use 라는 이름이 앞에 붙음

Hook의 규칙
1. Hook은 무조건 최상위 레벨(React function component의 최상위)에서만 호출해야한다.
2. Hook은 component가 rendering될 때마다 매번 같은 순서로 호출되어야 한다.
3. React function component 에서만 Hook을 호출해야한다.
4.

1-1. useState

• state를 사용하기 위한 Hook
• 아래와 같은 형식으로 사용

const [변수명, set함수명] = useState(초기값);

1-2. useEffect

Side Effect라고 불리는 작업의 특징

• 서버에서 데이터를 받거나 수동으로 DOM을 변경하는 작업
• 다른 component 에 영향을 미칠수 있으며 렌더링 중에는 작업이 완료될 수 없음

• React의 함수 컴포넌트에서 Side effect를 실행할 수 있게 해주는 Hook
• Life cycle에서 사용하는 componentDidMount, componentDidUpdate, componentWillUnmount 와 동일한 기능을 하나로 통합해서 사용할 수 있음
• 아래와 같은 형식으로 사용

useEffect(이펙트 함수, 의존성 배열);

• 의존성 배열 안의 값이 바뀌면 useEffect 함수가 실행됨
• mount, unmount 시에 단 한번씩만 실행

useEffect(이펙트 함수, []);

• 의존성 배열을 생략하면 컴포넌트가 업데이트될 때마다 호출됨

useEffect(이펙트 함수);

1-3. useMemo

• Memoized value를 return 하는 Hook (Memoization 된 data를 return)
• 의존성에 들어있는 value가 변했을 경우에만 create 함수를 호출하여 반환
• 위의 조건이 아니라면 기존의 value를 그대로 반환
• 빠른 렌더링 속도를 얻을수 있음
• useMemo는 랜더링이 일어나는 동안에 실행됨 ➡ 즉 랜더링이 일어나는 동안 실행되서는 안될 작업은 넣으면 안됨(Side effect 같은 것들)
• 아래와 같은 구성을 갖게 됨
  
• 아래와 같은 구성도 갖을 수 있지만 아래처럼 사용하면 useMemo를 사용하는 의미가 없어짐
  
• 아래와 같은 구성도 갖을 수 있음. Mount 이후에는 값이 변경되지 않음
  

1-4. useCallback()

• useMemo() Hook과 유사하지만 value가 아닌 function을 반환
• 의존성 배열이 바뀐 경우에만 function을 정의해서 반환해줌
• 아래와 같은 구성을 가짐
  

1-5. useRef()

• Ref를 사용하기 위한 Hook
• Reference 를 반환
• component의 Life time 내내 유지됨
• useRef() Hook 은 내부의 데이터가 변경되었을 때 별도로 알리지 않음
• 따라서 변경이 되었다고 하더라도 재 rendering 이 일어나지 않음
• 그래서 변화가 일어났을때 Callback ref를 사용함 (DOM Node)를 알기 위해서 가장 기초적인 방법

Reference 란?

• 특정 컴포넌트에 접근할 수 있는 객체
• Reference 에는 current 라는 객체가 있고 이는 현재 참조하고 있는 Element를 얘기함

• 아래와 같은 구성을 가짐