본문 바로가기
React.js

[React] React Hooks

DDINYOUNG 2023. 4. 30. 23:41

Hook은 React 버전 16.8부터 새로 추가된 요소이다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다.

 

📢 Hook 사용 규칙

- 최상위에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 않는다.

- React함수 컴포넌트 내에서만 Hook을 호출해야 한다. 일반 javascript 함수에서는 Hook을 호출해서는 안된다.

 

React에서 지원하는 Hook의 종류

◾ useState

컴포넌트의 state(상태)를 관리할 수 있다. 액션에 따라 state가 바뀌고 업데이트가 된다.

// React에 기본적으로 내장되어 있는 useState 훅을 사용하면, state를 만들 수 있다.

import { useState } from "react";

// const [state, state변경함수] = useState(기본 state값);

const [isLoggedIn, setIsLoggedIn] = useState(false);

// 전에 만든 "isLoggedIn" state의 값을 true로 변경한다.

setIsLoggedIn(true);

// ** useState함수를 사용해 만든 "state 변경 함수"를 사용하여야 한다.

 

◾ useEffect

렌더링 이후에 실행할 코드를 만들 수 있다. 렌더링이 일어날 때 특정 기능이 작동하도록 한다.

// React에 기본적으로 내장되어 있는 useState와, useEffect 불러오기

import { setState, useEffect } from "react";

...

function App() {
  const [data, changeData] = setState(false)
  
  // useEffect(실행할 함수, 트리거가 될 변수)
  
  useEffect(() => {
    if (data.me === null) {
      console.log("Data changed!")
    }
    
    return () => console.log("컴포넌트 파괴, 언마운트 됨")
  }, [data]);  
  
  // data변수가 바뀔때마다, react가 이를 감지해, 콘솔창에 "Data changed!" 출력
  
  return (
    <div>
      <button value="적용" onClick={changeData(!data)} />
    </div>
  )
}

export default App;

 

◾ useLayoutEffect

useEffect와 비슷하지만 다른점은 useEffect는 비동기 방식이고 useLayoutEffect는 동기 방식이다.

// React에 기본적으로 내장되어 있는 useState와, useEffect 불러오기

import { setState, useLayoutEffect } from "react";

...

function App() {
  const [data, changeData] = setState(false)
  
  // useLayoutEffect(실행할 함수, 트리거가 될 변수)
  
  useLayoutEffect(() => {
    if (data.me === null) {
      console.log("Data changed!")
    }
    
    return () => console.log("Layout 사라짐")
  }, [data]);  
  
  // data변수가 바뀔때마다, react가 이를 감지해, 콘솔창에 "Data changed!" 출력
  
  return (
    <div>
      <button value="적용" onClick={changeData(!data)} />
    </div>
  )
}

export default App;

 

◾ useContext

React에서 context 없이 변수나 함수를 다른 컴포넌트로 전달하려면 부모자식간에만 전달이 가능하므로, 컴포넌트가 많아질수록 불필요한 컴포넌트를 많이 거쳐야하는 문제가 발생한다!  ( A -> B -> C -> D )
context를 이용하면, 중간과정을 재치고 직통으로 전달할 수 있다!  ( A -> D )

 

전달하고자하는 컴포넌트에 context를 만들면, 불필요한 호출이 추가될 수 있으므로 context전용 파일을 만든다.

- context 파일

// newContext.js

import { createContext } from "react"  // createContext 함수 불러오기

// context안에 homeText란 변수를 만들고, 공백("") 문자를 저장한다.
const newContext = createContext({
  homeText: "",
})

- context를 사용할 부분

// App.js

import React from "react";
import Home from "./Home"; // 자식 컴포넌트 불러오기

import { newContext } from "./newContext"; // context 불러오기


export default function App() {

  // context에 저장할 정보를 입력한다.
  const homeText = "is Worked!"

  // NewContext.Provider로 우리가 만든 context를 사용할 부분을 감싸준다.
  return (
        <newContext.Provider value={{ homeText }}>
          <View>
            <Home />
          </View>
        </newContext.Provider>
  );
}

- context 불러오기

// Home.js

import React from "react";

import { useContext } from "react";
import { newContext } from "../newContext";


export default function Home() {

  // useContext hook 사용해서, newContext에 저장된 정보 가져오기
  const { homeText } = useContext(newContext);
  
  // 불러온 정보 사용하기!!
  return (
    <View>
      <Text>{homeText}<Text>
    </View>
  );
}

 

◾ useReducer

useState보다 컴포넌트에서 더 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트하고 싶을 때 사용하는 Hook이다. 

useReducer 의 첫번째 파라미터는 리듀서 함수, 그리고 두번째 파라미터는 해당 리듀서의 기본 값을 넣어준다. 이 Hook 을 사용 했을 때에는 state 값과 dispatch 함수를 받오는데, 여기서 state 는 현재 가르키고 있는 상태고, dispatch 는 액션을 발생시키는 함수이다. dispatch(action) 와 같은 형태로, 함수 안에 파라미터로 액션 값을 넣어주면 리듀서 함수가 호출되는 구조이다.

useReducer를 사용할 때의 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다는 점이다.

import React, { useReducer } from 'react';

function reducer(state, action) {
  // action.type 에 따라 다른 작업 수행
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    case 'DECREMENT':
      return { value: state.value - 1 };
    default:
      // 아무것도 해당되지 않을 때 기존 상태 반환
      return state;
  }
}

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { value: 0 });

  return (
    <div>
      <p>
        현재 카운터 값은 <b>{state.value}</b> 입니다.
      </p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-1</button>
    </div>
  );
};

export default Counter;

 

◾ useMemo

useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다. 렌더링 하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고 만약에 원하는 값이 바뀐 것이 아니라면 이전에 연산했던 결과를 다시 사용하는 방식이다.

const getAverage = numbers => {
  console.log('평균값 계산중..');
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};

const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState('');

  const onChange = e => {
    setNumber(e.target.value);
  };
  const onInsert = e => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('');
  };
// list 배열의 내용이 바뀔 때만 getAverage함수가 호출됩니다.
  const avg = useMemo(() => getAverage(list), [list]);

 

 

◾ useCallback

useCallback은 useMemo와 비슷한 함수이다. 주로 렌더링 성은을 최적화해야 하는 상황에서 사용한다. 이 Hook을 사용하면 핸들러 함수를 필요할 때만 생성할 수 있다.

  예를 들면 input값에 입력을 할 때 글자 하나하나가 입력 될 때마다 렌더링이 일어나는것이 아니라 list의 값이 변경되었을 때 함수를 실행시켜 렌더링 되게 한다.

import React, { useState, useMemo, useCallback } from 'react';

const getAverage = numbers => {
  console.log('평균값 계산중..');
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};

const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState('');

  const onChange = useCallback(e => {
    setNumber(e.target.value);
  }, []); // 컴포넌트가 처음 렌더링 될 때만 함수 생성
  const onInsert = useCallback(
    e => {
      const nextList = list.concat(parseInt(number));
      setList(nextList);
      setNumber('');
    },
    [number, list]
  ); // number 혹은 list 가 바뀌었을 때만 함수 생성

  const avg = useMemo(() => getAverage(list), [list]);

  return (
    <div>
      <input value={number} onChange={onChange}  />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <div>
        <b>평균값:</b> {avg}
      </div>
    </div>
  );
};

export default Average;

 

◾ useRef

HTML요소(태그)나 컴포넌트의 메모리주소를 가져와, 객체(레퍼런스) 형식으로 관리할 수 있다. current속성을 가지고 있는 객체를 반환한다. current값이 바뀌어도 재렌더링이 일어나지 않고 재랜더링 시에도 current값을 유지한다. 그렇기때문에 렌더링과 관련되지 않은 값을 관리할 때 사용한다.

import React, { useRef } from 'react';

const RefSample = () => {
// 초기값 설정
  const id = useRef(1);
  const setId = (n) => {
  // ref값을 n으로 넣어줌
    id.current = n;
  }
  const printId = () => {
  // 재렌더링이 되어도 계속 ref안의 값을 가지고 있는다
    console.log(id.current);
  }
  return (
    <div>
      refsample
    </div>
  );
};

export default RefSample;

 

◾ custom Hook

여러 컴포넌트에서 비슷한 기능을 공유할 때 사용자가 Hook을 작성하여 로직을 재활용할 수 있다.

 

다른 개발자들이 만든 다양한 Hook들을 라이브러리로 설치하여 사용할 수도 있다. 

https://nikgraf.github.io/react-hooks/

 

Collection of React Hooks

 

nikgraf.github.io

https://github.com/rehooks/awesome-react-hooks

 

GitHub - rehooks/awesome-react-hooks: Awesome React Hooks

Awesome React Hooks. Contribute to rehooks/awesome-react-hooks development by creating an account on GitHub.

github.com

 

'React.js' 카테고리의 다른 글

[React] 클래스형 컴포넌트 vs 함수형 컴포넌트  (0) 2023.04.30
[React] 리액트의 생명주기(Life Cycle)  (0) 2023.04.30
[React] Redux 구조와 Toolkit 활용하기(feat.Flux pattern)  (0) 2023.04.28
[React] Component와 Rendering  (0) 2023.04.22
[React] state  (0) 2023.04.21

'React.js' Related Articles

티스토리툴바