220322 React Hooks

Side Effect란?

• React 컴포넌트가 화면에 1차로 렌더링 된 이후에 비동기로 처리 되어야 하는 부수적인 효과를 말한다
  • 비동기 : 작업이 순차적으로 이루어지지 않는다
• 쉽게 함수 호출 시, 함수 내부가 아닌 외부에 영향을 미치는 것을 말한다

let a= 0;
function sideEffect() {
  a++;
}
sideEffect()

• sideEffect는 매개변수인 a를 1 증가시켜 return 하는 것이 아니라
• 함수를 이용하여 외부 스코프에 있는 변수 a를 변경했다
• 이처럼 외부 상태를 변경시키는 것을 'Side Effect ' 라고 한다

• 그러면 왜 굳이 잘 쓰고 있던 클래스형 컴포넌트는 함수형 컴포넌트로 바꿔야할까?

  • 클래스의 문법이 어렵다
  • 축소가 어렵다
  • function을 쓰고 안 쓰고에 따라서 this가 바뀌고, this 유무에 따라 이벤트 핸들러 등록 방식이 다르다.
  • 코드 재사용성이 떨어지고 코드 구성이 어렵다

• 함수형 컴포넌트에서는 클래스형 컴포넌트와는 달리 lifeCycle의 사용과 state관리가 어려웠기 때문에, 이를 보완하기 위해서 나온 것이 Hooks

⭐ React Hoooks란?

• 리액트 16.8 버전에서 새롭게 추가된 리액트 라이브러리 사용방법
• Hook이 등장하면서 함수형 컴포넌트에서도 state 관리가 가능해지고, lifecycle 관련 함수를 사용하는 것이 가능해졌다

• 다음은 공식 문서의 예제 코드이다
• 한 눈에 봐도 가독성도 더 좋고, 길이도 다르다

// Function component(Hook)
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

// Class component
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

Hooks 사용 규칙

• 최상위 (at the top level)에서만 Hook을 호출해야 한다
  • 반복문, 조건문, 중첩된 함수 내에서 Hook 실행 ❌
• React 함수 컴포넌트 내에서만 Hook 호출 가능

useState

• 가장 기본적이고도 핵심적인 역할을 하는 Hook 중 하나

const [state, setState] = useState(initialState);

• 상태 유지 값과 그 값을 갱신하는 함수를 반환
• 최초로 렌더링 하는 동안, 반환된 state는 첫번째 전달된 인자(initialState)의 값이다
• setState 함수는 state를 갱신할 때 사용
• 새 state 값을 받아 컴포넌트 리렌더링을 등록한다

220324 추가

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

• 위의 코드 예제에서와 같이
  onIncrease 와 onDecrease 에서 setNumber 를 사용 할 때
  그 다음 상태를 파라미터로 넣어준것이 아니라,
  값을 업데이트 하는 함수를 파라미터로 넣어주는 것도 가능하다.

useEffect

• 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 기능

  • React는 우리가 넘긴 함수를 기억했다가(이 함수를 ‘effect’라고 부릅니다)
    DOM 업데이트를 수행한 이후에 불러낼 것입니다 : react 공식 문서 설명

• useEffect는 첫 렌더링과 이후의 모든 업데이트에서 실행이 된다

  • effect를 렌더링 이후에 발생시키는 것
  • effect가 수행되는 시점에 이미 DOM이 업데이트되었음을 보장

• useEffect는 라이프사이클 함수와 관련이 많다

//함수형 컴포넌트
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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