[React 기본] 함수형 컴포넌트 만들어보기 (class > function Component)

단축키

vscode에서 reactjs snippet 플러그인을 설치했다면 rsi + enter 하면 자동으로 함수형 컴포넌트로 세팅해준다. (class형 컴포넌트는 rcc + enter)

 

---

함수형 컴포넌트

const HabbitAddForm = () => {}
//  또는
function HabbitAddForm () {}

정말 평소 javascript에서 쓰던 함수처럼 쓸 수 있다. 아래는 class컴포넌트로 작성한 코드를 function형 컴포넌트로 바꾼예제이다.

 

---

예제1 - Class형 컴포넌트에서 function 으로 바꿔보기

class형 컴포넌트를 사용한 기존소스

import React, { PureComponent } from 'react';

class habitAddForm extends PureComponent {
  inputRef = React.createRef();

  onSubmit = event => {
    event.preventDefault();
    
    const name = this.inputRef.current.value;
    name && this.props.onAdd(name);

    this.inputRef.current.value = '';
  }
  
  render() {
    return (
      <form className="add-form" onSubmit={this.onSubmit}>
        <input 
          ref={this.inputRef}
          type="text" 
          className="add-input"
          placeholder="hello"
        />
        <button className="add-button">Add</button>
      </form>
    ); 
  }
}

export default habitAddForm;

 

function으로 바꾼 소스

import React from 'react';

const HabitAddForm = (props) => {
  const formRef = React.createRef();
  const inputRef = React.createRef();

  const onSubmit = event => {
    event.preventDefault();
    
    const name = inputRef.current.value;
    name && props.onAdd(name);

    inputRef.current.value = '';
  }

  return (
    <form ref={formRef} className="add-form" onSubmit={onSubmit}>
      <input 
        ref={inputRef}
        type="text" 
        className="add-input"
        placeholder="hello"
      />
      <button className="add-button">Add</button>
    </form>
  ); 
};

export default HabitAddForm;

바꾸는 방법도 금방 익숙해진다. 변수와 함수는 원래 javascript 처럼 const로 선언하고, this를 사용하지 않는다.

포인트1. this를 사용하지 않는다.
포인트2. render함수 사용하지 않고 그냥 return한다.

 

---

 

예제 2 - state 부분도 변경해보기

class 기존소스

import React, { Component } from 'react';

class Habit extends Component {
  state = {
    count: 0,
  };

  handleIncrement = () => {
    this.setState({
      count: this.state.count + 1
    })
  };
  
  render() {
    return (
      <li className="habit">
        <button className="habit-button habit-increase" onClick={this.handleIncrement}>
          <i className="fas fa-plus-square"></i>
        </button>
      </li>
    )
  }
}

export default Habit;

 

function 으로 변경한 소스 useState

import React, { useState } from 'react';

const simpleHabit = props => {
    // state = {
    //   count: 0,
    // }; 
    const [count, setCount] = useState(0); //useState(초기값설정)

    const handleIncrement = () => {
      // this.setState({ count: this.state.count + 1 });
      setCount(count + 1);
    };

    return (
      <li className="habit">
        <span className="habit-name">Reading</span>
        <span className="habit-count">{count}</span>
        <button
          className="habit-button habit-increase"
          onClick={handleIncrement}
        >
          <i className="fas fa-plus-square"></i>
        </button>
      </li>
    );
};

export default simpleHabit;

[count, setCount] = useState(초기값)으로 state를 선언한다.
예제 1과 동일하게 this는 사용하지 않는다.

 

 

---

class와 function의 차이

빨간 부분영역이 함수는 계속해서 업데이트가 됨. 

class는 render 위에 있는 변수, state 등은 한번만 만들어지고, 변경이 일어나면 render 함수만 다시 실행된다.
function는 컴포넌트가 변경이 되면 코드블럭 전체가 반복해서 호출이 된다. 따라서 지역변수, 전역변수도 새로고침되듯 다시 선언된다고 보면 된다.

따라서 리액트 훅을 사용하여 선언하여야한다.
useState는 리액트훅에서 제공하는 API중에 하나인데, react가 알아서 값을 기억해서 따로 저장한다. 그래서 다시 리셋되지 않고 따로 메모리에 저장해서 불러오게 된다.

useRef도 동일하게 새로운 레퍼런스를 만드는게 아니라 한번만 만들고 그다음부터는 메모리에 저장해서 재사용한다.
이외에도 리액트 훅은 여러가지가 있는데 필요한 훅을 사용하면 된다. (하단에 공식문서 참조)

 

class	function
render위에 있는 것들은 한번만 만들어지고 그 다음부터는 render만 실행	함수 전체가 다시 그려짐 (모든게 새로고침)
-	따라서 리액트 훅을 사용하여야함.
state	useState
createRef	useRef

 

 

리액트 훅 공식문서

https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper

Hooks API Reference – React