리액트 개념 정리

리액트는 각각의 컴포넌트들로 묶여있다.

컴포넌트를 만드는 방법에는
Class, Function을 이용해서 만드는 방법 2가지가 있다.

Class Component

- React.Component

- React.PureComponent

리액트에서 제공하는 컴포넌트 클래스를 상속받아서 만든다.

import React, { Component } from 'react';

class LoginPage extends Component {
  state = {
    isLogin: false, 
  }

  render() {
    return <button>
      현재 회원님의 로그인 상태는 {this.state.isLogin}입니다 :)
    </button>
  }
}

export default LoginPage;

Function Component

- function

- memo(function)

- React Hook

함수로 만든다.

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

Class Component vs Function Component

Component에 State가 있고, 그 상태에 따라 state가 주기적으로 업데이트 되야 할 경우 클래스 컴포넌트를 사용하면 된다.
아니면 항상 데이터가 정적으로 표현된다면 함수 컴포넌트로 만들면된다.

그렇다면, 함수 컴포넌트에서는 state를 관리하지 못할까?
아니다! 함수형 컴포넌트에서도 React Hook을 이용하면 상태관리를 할 수 있다.

React Component란

리액트 컴포넌트는 HTML로 변환이 되어서 브라우저에 표기되는 것이다.

React의 큰 흐름

Component
Re-render: state, render( )
VDOM: virtual

PureComponent

PureComponent는 props와 state 안에 들어있는 데이터가 (최상위에 있는) 변하지 않으면 render 함수를 호출하지 않는다.
--> re-rendering을 하지 않는다!