리액트 함수형 컴포넌트 날아오르다(feat.Hook)

안녕하세요! 휴몬랩 신입 개발자 진(JIN)입니다.

휴몬랩은 아두이노 메이커스 교육, 온라인 코딩 교육 '플로우 코딩'을 서비스하고 더 좋은 코딩 교육 생태계를 만들어 나가고 있는 EDU TECH 스타트업입니다!


휴몬랩이 궁금하다면 click
플로우 코딩이 궁금하다면 click

리알못인 저는 처음에 회사의 코드를 분석하며 당황 + 좌절 하기도 했지만 리액트를 공부하며 참 재밌는 패러다임이라는 것을 느끼기도 했습니다. 그 중 리액트의 Hook이란 개념을 정리해보고자 합니다

클래스 컴포넌트 - 함수형 컴포넌트

---

우선, 리액트의 컴포넌트는 두 가지로 나뉩니다.

클래스 컴포넌트(class component)

함수형 컴포넌트(functional component)

1. 클래스 컴포넌트

import React, { Component } from 'react';

class HelloComponent extends React.Component
{    
    render(){
        return(
            <div>
                <h1>hi, i'm {this.props.name} !!</h1>
            </div>
        );
    };
}

export default HelloComponent;

2. 함수형 컴포넌트(비구조화 할당)

import React, { Component } from 'react';

const HelloComponent  = ( {name} ) => {
    return (
        <div>
            <h1>hi, i'm {name} </h1>
        </div>
    )
}

함수형 컴포넌트를 사용하면 render()함수가 필요 없습니다. 순수하게 함수만으로 컴포넌트를 생성할 수 있게 되는 것입니다. 컴포넌트 마운트 속도가 더 빠르고, 가독성도 좋고 단위 테스트하기에도 클래스형보다 쉽고 좋을 것 같다고 생각합니다.


그래서, state와 라이프사이클api를 활용할 때는 class component, 이외에는 functional component로 컴포넌트를 작성하는게 일반적인 패턴이었습니다.


이런 상황에서 Hook이란 개념이 React16.8부터 도입되어 함수형 컴포넌트에 날개를 달아주었습니다

이 Hook을 이용해서 함수형 컴포넌트에서도 state를 사용할 수 있게 되었습니다. 더 이상 state를 사용하기 위해 functional component -> class component로 굳이 변경할 필요가 없게 되었습니다.

Hook들을 알아보자

---

1. useState
 가장 기본적인 Hook입니다. 함수형 컴포넌트도 state관리가 가능해졌습니다. 가변적인 state 관리를 이 Hook을 이용해서 관리할 수 있습니다!

• useState() 함수는 하나의 state값만 관리합니다.
• 컴포넌트에서 다수의 state를 관리하려면 여러 개의 useState()를 사용해야 합니다.
• useState이 인자로 초기 state를 하나 받고 첫 렌더링에만 딱 한 번 사용됩니다.
• array의 비구조화 할당을 이용해 선언합니다. ex) const [name, setName] = useState('')

Info.js

import React, { useState } from 'react';

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

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

  const onChangeNickname = e => {
    setNickname(e.target.value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        <div>
          <b>이름:</b> {name}
        </div>
        <div>
          <b>닉네임: </b>
          {nickname}
        </div>
      </div>
    </div>
  );
};

export default Info;

useState() Hook을 보면 Info의 기본값을 초기화합니다.

• array의 첫번 째 요소는 state 변수
• array의 두번 째 요소는 state를 설정하는 함수.

setName()에 파라미터(name)를 넣어 호출함면 전달받은 파라미터로 값이 바뀌고 컴포넌트는 리렌더링합니다.
"첫 번째 요소인 state변수의 값을 갱신하려면, 두 번째 요소인 state설정 함수를 호출하여 상태를 변경하자"

---

2.useEffect
 리액트 컴포넌트가 렌더링 될 떼마다 특정한 작업을 수행하도록 설정하는 Hook입니다.
( componentDidMount + componentDidUpdate를 합친 형태 )

 

Info.js

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

const Info = () => {
  const [name, setName] = useState("");
  const [nickname, setNickname] = useState("");

  useEffect(() => {
    console.log("렌더링 완료!");
    console.log({
      name,
      nickname
    });
  });

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

  const onChangeNickname = event => {
    setNickname(event.target.value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        <div>
          <b>이름:</b> {name}
        </div>
        <div>
          <b>닉네임: </b>
          {nickname}
        </div>
      </div>
    </div>
  );
};

export default Info;

useEffect는 기본적으로 렌더링 직후마다 실행되며

두 번째 파라미터 배열에 무얼 넣느냐에 따라 실행 조건이 달라집니다.

• 상황1. 컴포넌트가 마운트 될 때만 실행하려면?

  -> 함수의 두번 째 파라미터로 빈 array를 넣어주면 됩니다.

  useEffect(() => {
      console.log("렌더링 완료!");
      console.log({
          name,
          nickname
      });
  }, []);

• 상황2. 특정 값만 업데이트 하고 싶으면?

  -> 역시 두번 째 파라미터로 전달되는 array 안에 검사할 값을 넣으면 됩니다.

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

---

3.useContext
 useContext Hook을 사용하면 함수형 컴포넌트에서 Context를 더 쉽게 사용할 수 있습니다.

 

ContextSample.js

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

//  전역적으로 사용할 context 설정
const ThemeContext = createContext("black");

const ContextSample = () => {
  // 전역적으로 context사용
  const theme = useContext(ThemeContext);
  const style = {
    width: "25px",
    height: "25px",
    background: theme
  };
  return <div style={style}></div>;
};

export default ContextSample;

---

4.useMemo
함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있습니다.

 

Average.js

import React, { useState, useMemo } 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 = e => {
    setNumber(e.target.value);
  };

  const onInsert = e => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber("");
  };

  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;

 이상으로 간단하게 몇 가지 hook들을 알아봤습니다. 추가적으로 useReducer나 직접 만드는 hook등은 도큐먼트를 참고해주시면 감사하겠습니다!

도큐먼트에서는 클래스형 컴포넌트도 유지하면서 나란히 손잡고 간다고 제시하고 있습니다. 거대한 리팩토링으로 힘을 빼기 보다는 유지하면서 팀원들의 피드백을 보고 바꿔가보는 건 어떠한지? 조심스레 던지고 있네요 ㅎㅎ

 

앞으로 있을 플로우 코딩 웹 리뉴얼에서도 Hook들을 점진적으로 사용해보려고 합니다. 추후 실제 비지니스에 적용해보고 더 좋은 내용으로 공유했으면 좋겠습니다. 감사합니다.

[references]

velopert님 리액트 Hooks 완벽 정복하기
https://ko.reactjs.org/docs/hooks-intro.html