[React] #10 리액트 : 함수 컴포넌트와 Hook ?

리액트 v16.8 이후에 등장한 Hook,

지난 포스팅에서 전박적인 컴포넌트에 대해 알아보았다면

오늘은 함수형 컴포넌트와 Hook에 대해 알아보자 🤔

 

---

 

클래스 컴포넌트 ? 함수형 컴포넌트 ?

 

리액트의 컴포넌트는 ① 클래스 컴포넌트와 ② 함수형 컴포넌트 두 가지로 나눌 수 있다.

둘은 작성하는 방식도 다르지만 내부적인 기능에도 차이가 존재한다.

 

먼저 클래스 컴포넌트부터 알아보자.

class로 정의하고 React.Component 슈퍼 클래스를 extends하게 된다.

중요한 것은 *** render() 통해 JSX를 리턴하게 되는 것이다!!!

 

//클래스 컴포넌트
class ClassComp extends React.Component {
  render() {
    return (
      <div className="container">
        <h2>Class style component</h2>
      </div>
    );
  }
}

 

다음 함수 컴포넌트! 일반적으로 우리가 작성하는 함수와 비슷하다.

function으로 정의하고 render() 없이 return문에서 JSX로 렌더링 한다.

 

//함수 컴포넌트
function FuncComp() {
  return (
    <div className="container">
      <h2 style={{ color: "gray" }}>Function style component</h2>
    </div>
  );
};

//함수 컴포넌트(arrow function)
const FuncComp = () => {
  return (
    <div className="container">
      <h2 style={{ color: "gray" }}>Function style component</h2>
    </div>
  );
};

 

클래스 컴포넌트는 처음 리액트가 생겨났을 때부터 존재했던 컴포넌트로 

과거 state나 lifecycle을 관리하기 위해서는 클래스 컴포넌트로 작성해야 했다.

(Hook이 등장하기 이전 함수형 컴포넌트에서는 state를 사용할 수 없었기 때문에)

 

하지만 리액트 훅이 등장하면서 함수 컴포넌트에서도 같은 기능을 사용할 수 있게 되었고,

현재는 클래스 컴포넌트 대신 간략하게 표현할 수 있는 함수 컴포넌트를 주로 사용하고 있다!

그렇다면 클래스 / 함수형 컴포넌트에서 state관리는 어떻게 할까?

 

예제를 진행하기 위해 두 컴포넌트 모두에게 props로 initNumber을 줘보자.

 

const App = () => {
  return (
    <>
      <ClassComp initNumber={1} />
      <FuncComp initNumber={2} />
    </>
  );
};

 

만약 initNumber의 값을 버튼을 누를 때마다 props가 변경되도록 관리하고 싶다면?

 

과거에는 아래와 같이 클래스 컴포넌트만 그 값을 관리해야 할 수 있었을 것이다.

클래스 컴포넌트를 사용할 경우 this를 정말 많이 볼 수 있다 ㅎㅎㅎㅎㅎ

this.props, this.state로 접근하고, this.setState()를 이용해 값을 변경한다.

 

class ClassComp extends React.Component {
  //constructor() 없이 생성
  state = {
    number: this.props.initNumber
  };
  
  handleNumber = () => {
    this.setState({ number: Math.random() });
  };
  
  render() {
    return (
      <div className="container">
        <h2>Class style component</h2>
        <p>Number : {this.state.number}</p>
        <button onClick={this.handleNumber}>Random</button>
      </div>
    );
  }
}

 

 

하지만 Hook을 이용할 수 있게 된 현재 함수형 컴포넌트에서도

아래와 같이 useState() 훅을 호출하여 state를 관리할 수 있게 되었다!

(useState()와 같이 use ... 로 시작하는 prefix형식을 가진 것들을 훅이라고 부른다!)

 

const FuncComp = ({ initNumber }) => {
  //Hook 
  //[현재 상태, 상태를 변경해줄 함수] 
  const [number, setNumber] = React.useState(initNumber);
  
  const handleNumber = () => {
    setNumber(Math.random());
  };
  
  return (
    <div className="container">
      <h2 style={{ color: "gray" }}>Function style component</h2>
      <p>Number : {number}</p>
      <button onClick={handleNumber}>Random</button>
    </div>
  );
};

 

 

이렇게 클래스 / 함수 컴포넌트에서 state를 관리하는 방식에 대해 알아보았다.

현재는 함수 컴포넌트를 많이 사용하는 추세이지만,

과거의 클래스 컴포넌트를 만나더라도 당황하지않고 반갑게 인사해줄 수 있을 것 같다 ㅎㅎㅎ

 

+)

이전 포스팅에서 언급한

클래스 컴포넌트에서는 setState()를, 함수 컴포넌트에서는 useState() 훅을 사용하는 것을 한번 더 확인할 수 있었다.

 

---

⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :)  ⚠️
***    혹시라도 잘못된 정보가 있다면  언제든지 알려주시면 감사하겠습니다  !    ***