React Hooks

벨로퍼트님의 리액트의 Hooks 완벽 정복하기 내용을 학습하며 정리한 내용입니다.

Hooks는 리액트 v16.8에 새로 도입된 기능으로,
기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.

1. useState

• 상태를 관리해야 할 때 사용
• 배열 비구조화 할당 문법을 사용
• 함수가 호출되면 배열을 리턴
• 첫번째 원소는 상태 값
• 두 번째 원소는 상태를 설정하는 함수로 setter 함수이다.
  파라미터로 전달 받은 값을 최신 상태로 설정
• 함수에 파라미터를 넣어 호출하면 전달받은 파라미터로 값이 바뀐다.

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

============================================

let previosValue = 0;

function setState(callback) {
  previosValue = callback(previosValue);
}

setNumber 를 사용 할 때
그 다음 상태를 파라미터로 넣어준것이 아니라,
값을 업데이트 하는 함수를 파라미터로 넣었다.

함수형 업데이트는 주로 나중에 컴포넌트를 최적화를 하게 될 때 사용.

배열 비구조화 할당

const [value, setValue] = useState(0);

======================================

const array = ['dog', 'cat', 'sheep'];
const [first, second] = array;
console.log(first, second); // dog cat

예시

import React, { useState } from 'react';

const Info = () => {
  const [name, setName] = useState('');

  const onChangeName = e => {
    setName(e.target.value);
  };

  return (
    <>
      <input value={name} onChange={onChangeName} />
	  <div> {name} </div>
    </>
  );
};

2. useEffect

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

클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate를
합친 형태와 비슷.

1) 마운트 될 때만 실행하고 싶을 때

설정한 함수가 컴포넌트가 화면에 가장 처음 렌더링 될 때만 실행되고,
업데이트 할 경우에는 실행 할 필요가 없는 경우

 useEffect(() => {
    console.log('마운트 될 때만 실행됩니다.');
  }, []);

2) 특정 값이 업데이트 될 때만 실행하고 싶을 때

특정 값이 변경이 될 때만 호출하게 하고 싶을 경우

배열 안에는 useState의 상태나
props로 전달받은 값을 넣어줘도 된다.

1) 함수형

  useEffect(() => {
    console.log(name);
  }, [name]);

2) 클래스형

componentDidUpdate(prevProps, prevState) {
  if (prevProps.value !== this.props.value) {
    doSomething();  
  }
}

3) 뒷정리 하기

컴포넌트가 언마운트되기 전이나
업데이트 되기 직전에 어떠한 작업을 수행하고 싶을 경우

  useEffect(() => {
    console.log('effect');
    return () => {
      console.log('cleanup');
    };
  });

컴포넌트가 나타날 때 콘솔에 effect 가 보이고,
사라질 때 cleanup 이 보여지게 된다.

렌더링이 될 때마다 뒷정리 함수가 계속 보여진다.
뒷정리 함수가 호출 될 때에는 업데이트 되기 직전의 값을 보여주고 있다.

만약에, 오직 언마운트 될 때만 뒷정리 함수를 호출하고 싶으면
useEffect 함수의 두번째 파라미터에 비어있는 배열을 넣으면 된다.

3. useContext

함수형 컴포넌트에서 Context를 쉽게 사용할 수 있다.

// ContextSample.js
import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('black');
const ContextSample = () => {
  const theme = useContext(ThemeContext);
  const style = {
    background: theme
  };
  return <div style={style} />;
};

export default ContextSample;

// App.js
import React from 'react';
import ContextSample from './ContextSample';

const App = () => {
  return <ContextSample />;
};

export default App;