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

김혜성·2021년 8월 6일

React 프론트엔드

프론트엔드

목록 보기

15/17

Component

데이터가 주어졌을 때 이에 맞추어 UI를 만든다
라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업 수행

Component == JS에서의 함수

인수 --- props, state
jsx --- return 값

클래스형 컴포넌트

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = '리액트';
    return <div>{name}</div>;
  }
}

export default App;

state 기능, 라이프 사이클 기능 사용 가능
임의 메서드 정의 가능
render()함수 필수
JSX 반환 필수

JSX: 리액트에서 생김새 정의할 때 쓰이는 문법
HTML처럼 생겼지만 JS다!
return <div>안녕하세요</div>;

함수형 컴포넌트

import React from 'react';

function App() {
  const name = '리액트';
  return <div>{name}</div>;
}

export default App;

선언 편함
메모리 자원 덜 사용
state, 라이프 사이클? --> 리액트 훅 도입!

function BlackDog() {
  this.name = '흰둥이';
  return {
    name: '검둥이',
    bark: function() {
      console.log(this.name + ': 멍멍!');
    }
  }
}

const blackDog = new Blackdog();
blackDog.bark(); // 검둥이: 멍멍!

function WhiteDog() {
  this.name = '흰둥이';
  return {
    name: '검둥이',
    bark: () => {
      console.log(this.name + ': 멍멍!');
    }
  }
}

const whiteDog = new Whitedog();
whiteDog.bark(); // 흰둥이: 멍멍!

일반 함수는 자신이 종속된 객체 가르킴
arrow 함수는 자신이 종속된 인스턴스 가르킴

props

: properties의 줄임말

컴포넌트 속성 설정하는 표현
부모 컴포넌트에서 설정 가능, 자식에서는 수정 불가
propTypes: prop의 타입 지정가능

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent name="리액트"></MyComponent>;
}

export default App;


// MyComponent.js
import React from 'react';
import PropTypes from 'prop-types';

const MyComponent = ({name}) => {
  return (
    <div>제 이름은 {name}입니다.</div>
  );
};

MyComponent.propTypes = {
  name: PropTypes.string
};

export default MyComponent;

여기서는 name이 props가 된다

state

: props와 달리 내부에서 바뀔 수 있는 값

클래스형 컴포넌트

constructor에서 state값 초기화 필요
super(props) 호출 필요
this.state로 조회
this.setState로 state값 변경

함수형 컴포넌트

리액트 훅 사용
useState함수로 state값 부르고 변경

공통적으로 둘 다 setter 함수로 state값을 조작한다

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    };
  }
  render() {
    const { number } = this.state; // state 를 조회할 때에는 this.state 로 조회합니다.
    return (
      <div>
        <h1>{number}</h1>
        <button
          // onClick 을 통하여 버튼이 클릭됐을 때 호출 할 함수를 지정합니다.
          onClick={() => {
            // this.setState를 사용하여 state에 새로운 값을 넣을 수 있습니다.
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;