WIL #4

1. React

 

1) Class형 vs 함수형

1-1) 함수형 컴포넌트

import React from 'react';
import './App.css';

function App() {
  const name = 'react';
  return <div className = "react">{name}</div>
}

export default App;

1-2) 클래스형 컴포넌트

import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>
  }
}

export default App;

출처: https://devowen.com/298

1-3) 차이점 정리

함수형:

• State, LifeCycle 관련 기능 사용 불가능.(Hook으로 해결)
• 메모리 자원 사용에 있어 class형 컴포넌트보다 효율적.(메모리 덜 사용함)
• 컴포넌트 선언 편함.

클래스형:

• State, LifeCycle 관련 기능사용 가능.
• 메모리 자원 사용에 있어 class형 컴포넌트보다 효율적.(메모리 더 사용함)
• 임의 메서드 정의할 수 있음.

출처: https://velog.io/@sdc337dc/0.%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

2) React hooks

 

React Hooks은 React 16.8버전에 새로 추가된 기능이다.

예를 들어, function component에서 state를 사용할 수 있게 됨.

React hook을 사용할 경우, class component, render 등을 사용하지 않는다.

모든 것은 하나의 function으로 함수형 프로그래밍이 가능해짐.