React 공부(1) : 함수형 vs 클래스형

커서 공유기능을 위한 스터디.

https://www.npmjs.com/package/quill-cursors

quill-cursors

동시편집을 위해 퀼 에디터 라이브러리를 사용했으며 커서 공유기능을 위해서는 퀼커서의 코드를 활용했다.

전체 로직을 내가 짠 것은 내가 아니지만 읽고 이해할 수 있어야 여기저기 붙일 수 있기 때문이다.

 

리액트 공부를 과제를 위해 하면서 느낀건데 예전에 멋사 활동기에 리액트만 해도 자바스크립트 기반이었는데 요즘엔 타입스크립트가 뜨긴 떴나보다.

 

함수형 컴포넌트를 짜는 방식이 대부분인 것을 보면서 프롭스와 훅의 사용이 더 중요해진게 느껴졌다.

정말 빠르게 변하는 것 같다. 나는 분명 클래스형으로 배우기 시작했었는데..

아무튼 코드를 여기저기서 보고 쓰다보니 가장먼저 필요한 능력이 함수형과 클래스형의 포팅이라 둘의 형식에 대한 공부부터 필요했다.

 

대표적인 사용 형식이다.

 

함수형

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

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

 

클래스형

import React, {Component} from 'react';

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

export default App;

 

함수형과의 눈에 띄는 차이점이라면

1. class 와 component 사용.

2. render가 필수. { } 안에서 render 의 위에 필요한 것들을 준비시켜서 render{} 안에서 사용함으로써 쓰는 방식이다.

3. this의 사용. 부모 컴포넌트의 정의한 값을 {this.props.이름} vs {props.이름} 으로 받아오는데 후자는 값을 파라미터로 받아오는 것에 차이가 있다.