ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • React - class 컴포넌트
    React/기본 2020. 6. 22. 20:00

     

     

    예전의 React에서는 class component가 중요한 역할을 맡았었다.

    그러나 React 16.8.0 업데이트 이후에 Hooks이 추가가 된 이후에 함수형 컴포넌트에서도 LifeCycle API와 state 기능을 구현할 수 있어 이제는 잘 사용하지 않는다.

    하지만, class형 component를 써야 하는 상황이 올 수 있기 때문에 정리가 필요하다.

    1. import React, { Component } from "react";

    - react 라이브러리에서 함수 또는 클래스를 import(확장)한다.

    - improt 문법은 JavaScript(ES6) 문법 중 하나로 export 된 다른 파일의 함수 또는 클래스를 불러와 사용할 수 있도록 하는 기능이다.

    2. class ClassComponent extends Component 

    - class 문법을 사용해서 컴포넌트를 선언한다.

    3. render()

    - React.Component의 하위 class에서 반드시 정의해야 하는 메서드이다.

    -  JSX(HTML + JavaScript)코드를 화면에 보여준다.

    4. return (

          <div>

            <h1>안녕하세요.</h1>

          </div>

        );

    - 화면에 그려지는 JSX(HTML + JavaScript) 코드를 반환한다.

    5. export default ClassComponent;

    - 다른 js 파일에서 ClassComponent를 사용할 수 있게 된다.

     

    class Component에서 데이터의 상태를 관리해주는 기능이 있다.

    그것은 바로 State라는 것인데, 클래스 컴포넌트 내에서만 선언하는 데이터를 말한다.

    여기서 constructor 다음에 super(props)를 작성한 이유는?

    ClassComponent 클래스는 Component 클래스를 상속(extends) 받았다.

    그러면 해당 클래스에서는 그 클래스에서 멤버뿐만 아니라 부모 클래스의 모든 멤버까지 포함하게 된다.

    이러한 현상을 방지하기 위해 즉, 부모 클래스의 멤버를 초기화시켜주기 위해 자식 클래스의 생성자에서 부모 클래스의 생성자 super()를 호출해야만 한다.

    하지만 Class Fileds 문법과 비구조 할당 문법을 사용하면 더욱 간단하게 선언할 수 있다.

    Class Fileds 문법과 비구조 할당 문법을 활용한 예제이다.

    + 버튼을 누르면 1씩 증가되고, - 버튼을 누르면 1씩 감소되는 것을 볼 수 있다. 

    'React > 기본' 카테고리의 다른 글

    React - Virtual DOM  (0) 2020.07.20
    React - 초기 렌더링과 리렌더링  (1) 2020.07.18
    React - map() 활용  (0) 2020.05.24
    React - request/response 이해하기  (0) 2020.05.24
    React - 메인 페이지 기능 구현  (0) 2020.05.20

    댓글

Designed by Tistory.