[React] Inflearn 처음 만난 리엑트(React) - Hooks

 

 

 

 

 

 

 

 

 

 

 

 

React.js

 

 

강의

(Inflearn) 처음 만난 리엑트(React) - SOAPLE님

 

https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

[무료] 처음 만난 리액트(React) - 인프런 | 강의

 

 

7강. Hooks

• React 16.8 버전에서 새롭게 등장한 개념이다.
• React로 개발할 때 대부분 Hook을 사용한다.
• Function Component에서 State와 LifeCycle에 따른 기능 구현이 불가능하기 때문에 이 기능을 지원하기 위해 나온 기능이다.
• 개발자가 직접 hook을 커스텀하여 사용할 수 있고, 명명할 때에는 hook 함수란 것을 나타내주기 위해서 함수명 앞에 use를 붙여서 작성한다.

 

 

useState()

state 기능을 사용하기 위한 Hook

 

예시

---

count라는 값을 선언하고, 버튼을 클릭하면 count의 값이 증가하는 함수가 있다고 가정해보자.

 

클릭 이벤트가 발생해도 Function Component에서 렌더링 되지 않는다면, 화면에 표시되는 count의 값은 처음 렌더링된 값 그대로 일것이다.

 

Function Component에서는 state 기능을 사용할 수 없기 때문에 Hook에서 제공해주는 useState() 함수를 사용하여 값이 재렌더링되도록 해줘야 한다.

 

 

사용 방법

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

import React, { useState } from "react";

function Counter(props) {
   const [ count, setCount ] = React.useState(0);

   return (
      <div>
         <p>총 {count}번 클릭했습니다.</p>
         <button
            onClick={() => setCount(count + 1)}
         >
            Click
         </button>
      </div>
   )
}

 

* Class Component에서는 setState() 함수 하나를 사용해서 모든 변수를 정의할 수 있지만

 

Function Component에서는 변수 각각에 대해 set함수가 따로 존재한다.

---

 

 

useEffect()

Side Effect를 수행하기 위한 Hook

 

React에서의 Side Effect는 부정적인 의미가 아닌 단순히 효과, 영향을 뜻한다.

 

예시

서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 작업 등

 

다른 컴포넌트에 영향을 미칠 수 있으며, 렌더링 중에는 작업이 완료될 수 없기 때문이다.

 

* Class Component의 componentDidMount, componentDidUpdate, componentWillUnmount 함수와 동일한 기능을 하나의 useEffect() 함수에서 제공해준다.

 

 

사용 방법

useEffect(Effect Function, 의존성 배열);

 

 

의존성 배열

Effect가 의존하고 있는 배열

 

 

실행 시기

• 의존성 배열 안의 값이 하나라도 수정됐을 경우에 Effect Function이 실행된다.
• 기본적으론 처음 Component가 렌더링되는 경우와 Update로 재렌더링되는 경우에  실행된다.

 

Effect Function이 mount, unmount 시에 한 번씩만 실행되게 하고싶은 경우에는 의존성 배열에 빈 배열을 넣어준다.

useEffect(Effect Function, []);

 

 

의존성 배열을 생략하면 Component가 Update될 때마다 호출된다.

useEffect(Effect Function);

 

 

useMemo()

Memoized value를 리턴하는 Hook

 

 

Memoization

최적화를 위해 사용하는 개념, 비용이 높은 함수(연산량이 많은 함수)를 미리 저장해놨다가 사용 시에 바로 호출하는 개념

 

 

사용 방법

memoized value를 생성하는 Creative Function과 의존성 변수를 파라미터로 갖는다.

const memoizedValue = useMemo(() => {
      return computeExpensiveValue(의존성 변수1, 의존성 변수2)
   }, [의존성 변수1, 의존성 변수2]
);

 

의존성 변수의 값이 변했을 경우에만 새로 Creative Function을 호출하고 아닐 경우 기존의 값을 그대로 가지고 있는다.

 

 

장점

Component가 반복해서 실행될 때마다 연산량이 높은 함수를 재실행하지 않아도 되기때문에 비용 절감 효과를 볼 수 있다.(빠른 랜더링)

 

 

주의 사항

useMemo는 렌더링이 실행될 때 실행되는 함수이므로 렌더링이 실행될 때 실행하면 안되는 함수를 넣어서는 안된다.

 

예시

useEffect에서 실행되어야 하는 SideEffect 함수, 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 작업 등

 

의존성 배열을 넣지 않을 경우, 매 렌더링마다 함수가 실행된다.

const memoizedValue = useMemo(() => {
      return computeExpensiveValue(의존성 변수1, 의존성 변수2)
   }
);

 

의존성 배열이 빈 배열인 경우, Component가 Mount 될 때만 함수가 실행된다.

const memoizedValue = useMemo(() => {
      return computeExpensiveValue(의존성 변수1, 의존성 변수2)
   }, []
);

 

 

useCallback()

• useMemo() Hook과 유사하지만, 값이 하닌 함수를 반환하는 Hook
• 의존성 배열의 값이 하나라도 바뀌는 경우에 함수를 반환해준다.

 

사용 방법

const memoizedCallback = useCallback(() => { 
      doSomething(의존성 변수1, 의존성 변수2); 
   }, [의존성 변수1, 의존성 변수2]
);

 

파라미터로 받는 함수를 Callback이라고 부른다.

 

 

useMemo() Hook으로 변환

// useMemo() Hook 사용
useMemo(() => Effect Function, 의존성 배열);

// useCallback() Hook 사용
useCallback(() => Effect Function, 의존성 배열);

 

 

useRef()

Reference를 사용하기 위한 Hook

 

Reference

특정 Component에 접근할 수 있는 객체

 

 

사용 방법

const refContainer = useRef(초기값);

 

* useRef() Hook은 내부의 데이터가 변경되어도 별도로 알리지 않는다.

 

따라서, ref에 DOM Node가 연결되거나 분리되었을 때 어떤 코드를 실행하고 싶다면

 

Callback Ref를 사용해야만 한다.

 

 

Callback Ref

사용 방법

useCallback() Hook이나 Callback 함수를 작성하고 ref로 호출한다.

const [height, setHeight] = useState(0);

const callbackRef = useCallback((node) => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);

  return (
    <div>
      <p> 키 : {height}px 이야</p>
      <div ref={callbackRef}>
      </div>
   </div>
);

 

 

 

 

Hook의 규칙

1. 무조건 최상위 레벨에서만 호출해야한다.

최상위 레벨

React Function Component의 최상위 레벨

 

 

2. Hook은 Component가 렌더링될 때마다 같은 순서로 호출되어야 한다.

// 잘못된 코드
function MyComponent(props) {
   const [name, setName] = useState("Newbalja");
   if(name != "") {
      useEffect(() => { ... });
   }
}

 

위 코드는 잘못 작성된 코드이다.

 

이유는 name이 null값을 가질 경우 useEffect() Hook은 실행되지 않기 때문에

 

재렌더링됐을 경우, 호출되는 순서가 달라질 수 있다.

 

 

3. React Function Component에서만 Hook을 호출해야한다.

 

 

 

 

Custom Hook 만들기

만들어야 하는 상황

2개의 JS에서 중복되는 함수가 있어 공유하려고 할 때, 새로운 Hook 함수를 만들어서 사용한다.

 

Custom Hook의 생성 규칙은 따로 없지만 Hook의 2가지 규칙을 따라야하고

 

함수이지만 함수명에 use를 붙여서 Hook이란걸 표시해줘야한다.

 

 

* 여러 개의 Component 에서 하나의 Custom Hook을 사용할 때

 

Component 내부에 있는 모든 state와 effect는 전부 분리되어있다.

 

( 각 Custom Hook 호출에 대해서 분리된 state를 갖게 되고, 호출 또한 완전히 독립적이다. )

 

 

Hook 데이터 공유 방법

function ChatUserSelector(props) {
   const [userId, setUserId] = useState(1);
   const isUserOnline = useUserStatus(userId);
}

 

ChatUserSelector에서 생성한 userId를 useUserStatus란 Custom Hook으로 전달해주고

 

userId가 바뀔때 마다 재렌더링 해준다.

 

 

 

 

 

 

참고 사이트

https://leehwarang.github.io/2020/11/29/ref.html

React useRef의 다양한 활용 방법(mutable object, callback ref와 forwardRef) - 이화랑 블로그