[React] 공식 문서 / Hook / 2. 훅 개요

https://ko.reactjs.org/docs/hooks-overview.html

 

 

 

 

📌 State Hook

 

다음은 버튼을 클릭하면 값이 1씩 증가하는 간단한 카운터 예시 코드이다.

 

import React, {useState} from 'react';

function MyComponent() {
    // "count"라는 새 상태 변수 선언
    const[count, setCount] = useState(0);

    return (
        <div>
            <p>You click {count} times </p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

export default MyComponent;

• 여기서 사용한 useState가 훅(Hook)이다.
• hook을 호출해 함수 컴포넌트 안에 state 추가
• 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지

 

 

useState 특징

• 현재의 state값과 이 값을 업데이트 하는 함수의 쌍
• 이벤트 핸들러나 다른 곳에 호출 가능
• class의 this.setState와 거의 유사
  • 이전 state와 새로운 state를 합치지 않는다는 차이점
  • setState Hook의 state는 객체일 필요 없다는 차이점 (객체여도 되긴함)
• 인자로 초기 state값을 하나 받음 (위 예시에서는 0을 받음)
  
  • 이 초기값은 첫번째 렌더링에만 딱 한번 사용됨

 

 

여러 state 변수 선언하기

하나의 컴포넌트 내에서 State Hook을 여러개 사용 가능!

-> 배열 구조 분해(destructuring) 문법 사용

• useState로 호출된 state변수들을 다른 변수명으로 할당 가능하게함
• 변수명은 useState API와 관련이 없고, 매번 렌더링 할때 useState가 사용된 순서대로 실행

 

 

그런데 Hook이 뭔가요?

함수!

 

어떤 함수..?

함수 컴포넌트에서 React State와 생명주기 기능(lifecycle features)을 "연동(hook into)"할 수 있게 해주는 함수

 

 

Hook 특징

• 클래스 안에서는 동작X
• 대신 클래스 없이 리액트를 사용할 수 있게 해주는 도구
• But 이미 짜놓은 컴포넌트를 모조리 재작성하는 것 권장 X!
  새로 작성하는 컴포넌트부터 Hook 이용하면 됨
• 내장 Hook도 있고, 내가 Hook을 직접 만들 수도 있음

 

 

 

 

 

⚡️ Effect Hook

 

side effect란? (effects라고도 함)

컴포넌트 안에서 데이터 가져오거나 구독, DOM을 직접 조작하는 동작

(다른 컴포넌트에 영향을 줄 수 있음. 렌더링 과정에서는 구현할 수 없는 작업임)

 

 

 

Effect Hook - useEffect

함수 컴포넌트 내에서 side effect를 수행할 수 있게 해줌

(React class의 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만,

 하나의 API로 통합된 것)

 

 

 

다음 예시는 React가 DOM을 업데이트한 뒤에 문서의 타이틀을 바꾸는 컴포넌트이다.

 

import React, { useState, useEffect } from 'react';

function MyComponent() {
    const [count, setCount] = useState(0);

    //componentDidMount, componentDidUpdate와 비슷
    useEffect(() => {
        // 브라우저 API를 이용해 문서 타이틀을 업데이트
        document.title = `You clicked ${count} times`;
    });

    return (
        <div>
            <p>You click {count} times </p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

export default MyComponent;

• useEffect : React는 DOM을 바꾼 뒤에서 effect 함수 실행
• Effects는 컴포넌트 안에 선언되어있기 때문에 props와 state에 접근 가능
• 기본적으로 React는 매 렌더링 이후에 effects 실행 (첫 렌더링 포함)
• ** 생명주기와 다른 점은 나중에 자세히 다루겠음.

 

 

Effect를 "해제"하고 싶다면?

-> 해제하는 함수 반환 (선택적)

 

 

다음은 친구의 접속 상태를 구독하는 effect를 사용했고, 구독을 해지함으로써 effect 해제하는 컴포넌트이다.

 

(ChatAPI 부분에 에러가 나서, 4. Effect Hook 공부하면서 다시 생각해보기)

[ tlog.tammolo.com/blog/React-Hooks-cbf3d997cecb419fa570d0964d238629/ ] 혹시 참고할까봐 첨부하는 링크^.^

 

 

 

 

 

 

추가 +) effect가 있고 없고의 차이점

❗ 탭 부분 잘 봐봐 ❗ 파비콘 있는 부분 ❗

 

1) effect 있는 경우

2) effect 없는 경우

 

 

 

 

 

 

 

번외 ) ' '와 ` `의 차이

	' '	` `
+ 사용 여부	+ 사용 해야함	+ 사용 안해도 됨
예	const userInfo = 'User info: ' + name + ' ' + surname + ' ' + telephone;	const userInfo = `User info: ${name} ${surname} ${telephone}`;

 

 

 

 

 

✌️ Hook 사용 규칙

Hook은 그냥 JS 함수이지만, 두 가지 규칙을 준수해야 함

• 최상위(at the top level)에서만 Hook 호출
  • 반복문, 조건문, 중첩된 함수 내에서 실행X
• React 함수 컴포넌트 내에서만 Hook 호출
  • 일반 JS에서 Hook 호출 X
  • 직접 작성한 custom Hook 내에서는 훅 호출 가능

 

 

 

 

 

💡 나만의 Hook 만들기

 

state 관련 로직을 다른 컴포넌트에서 재사용하고 싶다면?

-> 1. higher-order components

-> 2. render props

 

 

이와 달리 Custom Hook은 컴포넌트 트리에 새 컴포넌트를 추가하지 않고도 가능