함수형 컴포넌트와 this

 

함수형 컴포넌트는 this를 사용하지 않으며, 상태 관리와 생명주기 관리에서 React Hooks를 사용한다.

this를 사용할 필요가 없으니 코드가 간결하고 직관적이다.

 

 

1. 클래스 컴포넌트와 의 차이점

클래스 컴포넌트에서는 this가 컴포넌트의 인스턴스를 가리키며, 상태(state)와 메서드를 관리하기 위해 사용된다.

하지만 함수형 컴포넌트는 인스턴스를 만들지 않고 단순히 함수를 호출하는 방식으로 작동하기 때문에 this를 사용할 필요가 없다.

 

 

2. React Hooks

React의 Hooks를 사용하면 함수형 컴포넌트에서도 상태와 생명주기 기능을 구현할 수 있다.

이를 통해 this없이도 클래스 컴포넌트의 기능을 대체할 수 있다.

 

함수형 컴포넌트에서는 this를 사용하지 않고 useRef를 사용해 동일한 기능을 구현할 수 있다.

import { useRef } from 'react';

function MyComponent() {
  const buttonRef = useRef(null);

  const handleClick = () => {
    console.log(buttonRef.current);
  };

  return <button ref={buttonRef} onClick={handleClick}>Click Me</button>;
}

 

 

useState, useEffect를 사용해서 함수형 컴포넌트 상태와 생명주기 기능 구현하기

 

클래스 컴포넌트

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increase</button>
      </div>
    );
  }
}

 

여기서 this는 상태(state)와 메서드(handleClick)에 접근하는 데 사용된다.

 

함수형 컴포넌트

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase</button>
    </div>
  );
}

 

여기서는 Hooks를 사용해서 상태(count)를 관리하며, this 없이도 동일한 기능을 구현할 수 있다.