React Hook (State, useEffect 등등 에 대하여)

김하진·2023년 2월 1일
0

React Hooks 이란?

  • React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이 state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리!
  • Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다.

그렇다 리액트는 굉장히 편하게 상태관리 를 하기 위한 많은 기능들을 제공한다. 물론 vue 에서도 비슷한 기능들이 있다! 기존 바닐라 js를 많이 쓰던 나로써는 코드도 굉장히 깔끔해지고, 상태 관리등에 굉장히 많은 이점이 있다고 생각이 든다.

useState

  • useState 는 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줍니다. 만약에 함수형 컴포넌트에서 상태를 관리해야 되는 일이 발생한다면 이 Hook 을 사용하시면 됩니다.

예를 들어 counter 함수를 구현한다고 하면

import React, { useState } from 'react';

const Counter = () => {
  const [value, setValue] = useState(0);
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b> 입니다.
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};

이처럼 value 를 이용해 실시간으로 값을 받아 올 수 있고, setValue 를 통해서 실시간으로 값을 업데이트 해줄 수 있다!
이 뿐만 아니라 나는 기본적으로 api에 호출되는 변수들을 useState로 관리 하고 있다.

예를 들어 input 의 value 를 받아온다면

 const [name, setName] = useState('');
 
  const onChangeName = e => {
    setName(e.target.value);
  };


<input value={name} onChange={onChangeName} />

이런식으로 받아오면 된다. post 로 api를 보내준다면 value 값에 name 을 넣어주면 된다.

useEffect

  • useEffect 는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook 입니다. 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를 합친 형태로 보아도 무방합니다.
// 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;

이런식으로 useEffect() 안에 실행할 함수, 그리고 트리거가 될 변수를 넣어주면 작동합니다!
또한 나는 이번에 spa 에서 휠 이벤트를 통해 다음페이지를 넘겨주는 작업을 했는데 여기서도 유용하게 사용 하였습니다.
useRef까지 사용하여 useRef의 예제에서 보면,

useRef

  • useRef 함수는 current 속성을 가지고 있는 객체를 반환하는데, 인자로 넘어온 초기값을 current 속성에 할당합니다. 이 current 속성은 값을 변경해도 상태를 변경할 때 처럼 React 컴포넌트가 다시 랜더링되지 않습니다. React 컴포넌트가 다시 랜더링될 때도 마찬가지로 이 current 속성의 값이 유실되지 않습니다.

나는 spa 에서 긴 페이지를 구현하면서 section을 나누면서 유용하게 사용하였다. useRef([]) 를 이용하여 exeRef.current[0], exeRef.current[1], 이런식으로 렌더할 페이지별로 나눌 수 있다.

휠 이벤트를 예시로 들면

  useEffect(() => {

      const outerDivRefCurrent = outerDivRef.current;
      outerDivRefCurrent.addEventListener("wheel", wheelHandler, {
        passive: true,
      });

      return () => {
        outerDivRefCurrent.removeEventListener("wheel", wheelHandler, {
          passive: true,
         });
      };
    
  }, []);
  
  const wheelHandeler = () => {
    outerDivRef.current.scrollTo({
    	top: cureent값,
    	left: 0,
    	behavior: "smooth",
    });
 }

이런식으로 구현이 가능하다

요즘 프론트 공부하면서, react나 vue에서도 공부할게 굉장히 많다는 걸 세삼 느끼고 있다..

profile
진킴

0개의 댓글