[React] 리액트에서 컴포넌트를 만드는 방법과 종류

이 글은 드림코딩 강의 내용과 리엑트공식문서를 기반하여 정리한 글입니다.

0. 리액트 컴포넌트의 종류

클래스 컴포넌트

• React.Component
• React.PureComponent

함수 컴포넌트

• function
• memo(function)
• React Hook

일반적으로 컴포넌트에 상태가 존재하고 그 상태에 따라 컴포넌트가 주기적으로 업데이트 되어야 한다면 클래스 컴포넌트를 사용하고,

컴포넌트에 상태가 없고 항상 정적으로 데이터가 표기가 된다면 함수 컴포넌트를 사용하자.

1. 클래스로 만드는 컴포넌트

컴포넌트에 상태가 존재하고 그 상태에 따라 컴포넌트가 주기적으로 업데이트 되어야 한다면 클래스 컴포넌트를 사용하자.

• 상태가 존재한다.
• 라이프사이클 메서드가 존재한다.
• 상태의 변화에 따라 렌더함수가 실행된다.

1-1. React.Component

가장 일반적으로 state와 render함수를 이용하는 클래스로 만드는 컴포넌트이다.

상태가 존재하고 상태에 변화가 생기면 render함수가 실행된다.

import React from 'react';

class LikeButton extends Component {
    state = {
      numberOfLikes: 0,  
    };

	render() {
        return <button>
            {this.state.numberOfLikes}
        <button>;
    }
}

1-2. React.PureComponent

리액트는 state나 관련된 props가 변경이 되면 render함수가 호출이 된다.

pure.Component는 컴포넌트의 상태나 props에 변화가 없다면 render함수가 호출되지 않게 해준다.

단, state와 props를 얕게(shallow) 검사하기 때문에 주의가 필요하다. state의 참조값이 변하지 않으면 render가 되지 않기 때문에 setState() 를 사용할 때 새로운 참조값의 객체를 생성하여 넘겨주도록 하여 사용하자.

• 기존 Component

onClickIncrement = habit => {
    const habits = [...this.state.habits];
    const index = habits.indexOf(habit);
    habits[index].count++; // 기존 객체 활용
    this.setState({ habits }); // 기존 객체를 업데이트
  };

• pure.Component

handleIncrement = habit => {
    const habits = this.state.habits.map(item => {
      if (item.id === habit.id) {
        return { ...habit, count: habit.count + 1 }; // 새로운 객체 생성
      }
      return item;
    });
    this.setState({ habits }); // 새로운 객체를 업데이트
  };

2. 함수로 만드는 컴포넌트

2-1. function

컴포넌트에 상태가 없고 항상 정적으로 데이터가 표기가 된다면 함수 컴포넌트를 이용하자.

• 상태가 없다.
• 라이프사이클 메서드가 없다.
• 단, 리엑트 훅을 사용하면 클래스 컴포넌트처럼 사용이가능하다. (함수 컴포넌트안에서도 상태를 가질 수 있다.)

클래스는 멤버변수가 딱 한번 생성되는 반면에 function 컴포넌트는 매번 실행되기 때문에 계속 반복해서 생성된다.

function App() {
    return <h1>Hello</h1>
}

2-2. memo(function)

memo는 클래스 컴포넌트에서 pure.Component와 비슷한 역할을 한다.

컴포넌트의 상태나 props에 변화가 없다면 render함수가 호출되지 않게 해준다.

const HabitAddForm = memo(props => { 
    //props가 변경되지 않으면 호출되지 않는다.
  const formRef = React.createRef();
  const inputRef = React.createRef();

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

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

2-3. React Hook

리액트 훅은 기존의 함수형 컴포넌트에서 state와 라이프사이클 메서드를 잘 이용할 수 있도록 도와준다.

• useState() : 클래스 컴포넌트에서 state와 setState()

const [count, setCount] = useState(0); // count의 초기값 0

• useRef : 클래스 컴포넌트에서 React.createRef()

const spanRef = useRef();

<span ref={spanRef}></span>

• useCallback : 콜백함수를 기억하기 위해 사용, 콜백함수가 매번 실행되어 렌더링이 되는 사이드 이펙트를 막기 위해 사용한다.

const handleIncrement = useCallback(()=>{
    ...
});

<button onClick={handleIncrement}></button>

• useEffect(callBack, state) : 컴포넌트가 마운트 되었을 때 혹은 업데이트가 될 때 마다 호출되는데 특정 state가 변경되었을 때만 호출 되도록 하고싶으면 두번째 인자로 전달해준다.