[패스트캠퍼스] 프론트엔드 강의 학습일지(React 함수형 컴포넌트)

국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다.

---

React Hooks

리액트 생명주기가 있다.

• 시작 할 때(Mounting)
• 시작하고 난 이후(Updating)
• 컴포넌트가 더 이상 사용하지 않을 때(Unmounting)

이러한 중요한 생명주기를 함수형 컴포넌트에선 사용하지 못해서, 클래스 컴포넌트로 사용해 왔다.

하지만 React Hooks가 업데이트되어서 함수형 컴포넌트에서도 생명주기를 사용할 수 있게 되었다.

 

함수형 컴포넌트의 장점

• useEffect를 사용해서 Hooks(여러 가지의 생명주기를 간결하게 사용)를 사용할 수 있다.
• state 업데이트는 const [getter, setter(state를 정하는 함수)] = useState("") 이런 식으로 하고, getter를 이용해서 state를 업데이트할 수 있다.
• HOC 컴포넌트를 Custom React Hooks로 대체할 수 있다.
  • HOC(Higher Order Component): 재사용 가능한 로직만을 분리해서 컴포넌트로 만드는 방식이다.
  • HOC 컴포넌트 사용 시 많은 Wrapper가 생길 수 있는 문제점이 있다.
  • 이러한 문제점을 Custom React Hooks로 대체하면 Wrapper로 감싸주는 게 아니라 넣어서 사용하면 돼서 Wrapper가 많아지는 문제를 해결할 수 있다.

[강의 중 스크린샷] 클래스와 함수형의 코드 차이점

[강의 중 스크린샷] HOC컴포넌트의 많은 Wrapper의 문제점

 

클래스 컴포넌트와 함수형 컴포넌트의 비교

Class Component

• 많은 기능 제공
• 긴 코드 양
• 복잡한 코드
• 더딘 성능

Functional Component

• 적은 기능 제공
• 짧은 코드
• 심플한 코드
• 빠른 성능

 

Tic Tac Toe 앱

함수형 컴포넌트로 변경

이전에 만들었던 앱(https://rosylee.tistory.com/20)에 클래스형 컴포넌트를 함수형 컴포넌트로 변경한다.

코드를 작성할 때 Snippet을 활용하면 자동완성 코드로 빠르게 생성할 수 있다.

rafce // react arrow function export
useStateSnippet // useState

 

useState

useState를 사용하는 두 가지 방식이 있다.

• setNumber(number + 1): 한 번만 실행
• setNumber(prev => prve +1): 코드마다 실행

아래 코드에서 확인할 수 있다.

import React, { useState } from 'react';
import Square from './Square';
import './Board.css';

const Board = () => {
  const [squares] = useState(Array(9).fill(null));
  const [number, setNumber] = useState(0);

  const handleClick = (i) => {
    setNumber(number + 1);
    setNumber(number + 1);
    console.log(number); // 위에서 1을 두번 더했지만 한번씩만 실행됨

    // setNumber((prev) => prev + 1);
    // setNumber((prev) => prev + 1);
    // console.log(number); // 두번 더한 값이 실행됨
  };

  const renderSquare = (i) => {
    return (
      <Square
        value={squares[i]}
        onClick={() => handleClick(i)}
      />
    );
  };

  return (
    <div>
      <div className="status">Next Play: X, O</div>
      <div className="board-row">
        {renderSquare(0)}
        {renderSquare(1)}
        {renderSquare(2)}
      </div>
      ...
    </div>
  );
};

export default Board;

 

setNumber(numver + 1)로 사용한 거는 두 번 더했지만 한 번씩만 실행돼서 console.log에 0,1,2,3... 이런 식으로 찍히고

setNumber(prev => prev + 1)로 사용한거는 두 번 더해진 값이 실행돼서 console.log에 0,2,4,6... 이렇게 찍힌다.

두 가지 방식의 차이점을 알아두자.

 

- 강의 중 소개해주신 유용한 확장 프로그램

다음 라인을 미리 예상해 주는 프로그램이다.

https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode 

Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more - Visual Studio Marketplace