React Hooks

김서현·2022년 4월 2일

React

목록 보기

2/2

props

부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다.

자식 컴포넌트에서는 props를 변경할 수 없습니다.

state

한 컴포넌트 안에서 유동적인 데이터를 다룰 때 사용됩니다.

컴포넌트 안에서 데이터를 변경할 수 있습니다.

함수 컴포넌트

클래스 보다 메모리를 적게 사용한다.
state기능 및 라이프 사이클API를 사용할 수 없다. (Hooks도입으로 해결 됨)

import React from "react";

function App() {
	const test = "test";
    return <div>{test}</div>;
}

export default App;

클래스 컴포넌트

state기능 및 라이프 사이클 기능을 사용할 수 있다.
render()함수가 꼭 필요하다.

import React, { Component } from "react";

 class App extends Component {
   render(){
	const test = "test";
    return <div>{test}</div>;
   }
}

export default App;

Hooks란?

Hooks 는 리액트 버전16.8부터 새로 추가된었습니다.
Hooks를 이용하여 기존 클래스 컴포넌트에서 사용할 수 있던 기능을
함수 컴포넌트에서도 작업할 수 있습니다.

1. useState

useState는 함수 컴포넌트에서 가변적인 상태를 지니고 있을 수 있게 해줍니다. 만약 함수 컴포넌트에서 상태를 관리해야 한다면 이 State Hook을 사용하면 됩니다.

카운터 예시

import React, { useState } from 'react';

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

  return (
    <div>
      <p>현재 카운터 값은 {count} 입니다.</p>
      <button onClick={() => setCount(count + 1)}>
        Click
      </button>
    </div>
  );
}

useState를 사용할 때는 import를 통해 불러오고, 다음과 같이 배열 비구조화 할당으로 사용됩니다.

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

함수의 파라미터에는 상태의 기본값을 넣어줍니다. 이 함수가 호출되면 배열을 반환하는데 첫번째 원소는 상태값이고, 두번째 원소는 상태를 설정하는 함수입니다.

count: 상태값
setCount: 상태를 설정하는 함수

setCount함수에 파라미터를 넣어 호출하게 되면 전달받은 파라미터로 값이 바뀌게 되고 컴포넌트가 정상적으로 리렌더링 됩니다.

여러 State변수 선언하기

하나의 컴포넌트에서 여러 State Hook을 사용할 수 있습니다.

function Example() {
  // 상태 변수를 여러 개 선언했습니다
  const [name, setName] = useState('');
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState({ 
    text: 'Learn Hooks',
  	check: ''
  });
  // ...
}

useState함수는 하나의 상태만 관리할 수 있기 때문에 관리해야할 상태가 여러개라면 useState를 여러번 사용하면 됩니다.

2. useEffect

컴포넌트 안에서 데이터를 가져오거나 구독 설정하기, DOM을 직접 조작하는 작업을 side effects(또는 effects)이라고 합니다.

useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있도록 해줍니다. 클래스 컴포넌트의 componentDidMount나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되는 하나의 통합된 API입니다.

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

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

  // componentDidMount, componentDidUpdate와 같은 방식으로
  useEffect(() => {
    console.log({count});
  });

  return (
    <div>
      <p>현재 카운터 값은 {count} 입니다.</p>
      <button onClick={() => setCount(count + 1)}>
        Click
      </button>
    </div>
  );
}

이전 카운터예시에 클릭 할 때마다 console창에 count값이 나오도록 했습니다.

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

만약 useEffect에서 설정한 함수가 화면에 가장 처음 렌더링 될 때만 실행되고 업데이트 할 경우 실행 할 필요가 없다면 함수의 두번째 파라미터에 배열을 넣어주면 됩니다.

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

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

useEffect를 사용할 때 특정한 값이 변경 될 때만 호출하고 싶은 경우 두번째 파라미터에 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 됩니다.

  useEffect(() => {
    console.log({count});
  }, [count]); //count값이 변경될 때마다 실행

배열 안에는 useState를 통해 관리하고 있는 상태를 넣어줘도 되고, props로 전달받은 값을 넣어줘도 됩니다.

정리(clean-up)하기

만약 컴포넌트가 언마운트 되기 전이나, 업데이트 되기 전에 어떠한 작업을 수행하고 싶다면 정리 함수를 반환해 주어야 합니다.

useEffect(() => {
  	console.log('effect');
    console.log({count});
  	return () => {
    	console.log('clean-up');
    	console.log({count});
    };
  }, []);

3. useContext

이 Hook은 컴포넌트에서 Context를 더욱 쉽게 사용 할 수 있습니다.

import React, { createContext, useContext } from 'react';

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

export default ContextSample;