본문 바로가기
Today I learned

2022 03 20 react 함수형 컴포넌트

by soheemon 2022. 3. 20.

함수형 컴포넌트의 과거와 현재

함수형 컴포넌트는 함수를 기반으로 컴포넌트를 생성할 수 있는 문법이다.

과거에는 함수형 컴포넌트는 라이프 사이클과, state를 사용할 수 없다는 단점이 있었다.

이런 단점으로 인해 함수형 컴포넌트는 라이프사이클과, state를 사용하지 않는 간단한 컴포넌트를 만드는데 주로 사용되었으나,

16.8버전 부터 Hook이라는 개념이 도입된 후 클래스 컴포넌트와 동일하게 사용할 수 있게 됐다.

 

함수형 컴포넌트에서 state 어떻게 써요? -> useState Hook

useState를 호출할때 초기값을 먼저 파라미터로 전달한다.

그리고 useState호출하면 배열을 반환하는데, 첫번째 반환값은 state값을, 두번째 반환값은 state를 변경할 수 있는 함수를 반환한다.

 

const countState = useState(/*초기값*/)

인덱스 설명
countState[0] state의 값을 반환한다.
countState[1] state값을 변경할 수 있는 함수를 반환한다.
호출시 state가 업데이트 되므로 관련된 라이프 사이클이 일어난다.

예시는 아래와 같다.

import React, { useState } from 'react';

function Example() {
  const countState = useState(0);
  // const [count, setCount] = useState(0); 이렇게 표현할 수도 있다.
  return (
    <div>
      <p>You clicked {countState[0]} times</p>
      <button onClick={() => countState[1](countState[0] + 1)}>
        Click me
      </button>
    </div>
  );
}

함수형 컴포넌트에서 라이프사이클 어떻게 써요? -> useEffect Hook

useEffect Hook을 사용하면 클래스 컴포넌트의 componentDidmount, conponentDidUpdate, componentWillUnmount까지 한번에 해결할 수 있다!

 

useEffect(() => {

  /* componentDidmount, componentDidUpdate시마다 실행할 함수*/

})

function Example() {
    const [count, setCount] = useState(0);
    useEffect(() => {
        document.title = `You clicked ${count} times`;
    });

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

클릭하면 state가 변경되고 state가 변경될때마다,

useEffect에 인자로 전달된 함수가 실행되어 타이틀이 변경되는것을 확인할 수 있다.

각각의 라이프사이클을 구분해서 사용하려면 사용방법은 아래와 같다.

function Example() {
    const [count, setCount] = useState(0);
    useEffect(() => {
        document.title = `You clicked ${count} times`;
    });
    
    useEffect(() => {
        console.log('count가 이전과 다르게 변경될 때만 실행될 함수');
        console.log('우린 그걸 componentDidUpdate라고 부르기로 했어요');
    }, [count]);
    
    useEffect(() => {
        console.log('최초 mount시에만 실행될 함수');
        console.log('우린 그걸 componentDidMount라고 부르기로 했어요');
    }, []);
}

그런데, 최초 마운트시에 componentDidUpdate가 실행된다 :/ 이건 왜그런지 연구를 좀 해봐야 겠다.

'Today I learned' 카테고리의 다른 글

2022 04 20 - RabbitMQ  (0) 2022.04.20
2022 03 20 하이오더 컴포넌트 예제  (0) 2022.03.20
2022 03 20 - 단축평가  (0) 2022.03.20
2022 03 19 - Promise 체이닝과 / async await  (0) 2022.03.19
2021 11 20 혼돈의 Optional 훈련  (0) 2021.11.20

댓글