Search

React의 종류

개요

리액트는 함수형 컴포넌트(Functional Component)와 클래스형 컴포넌트(Class Component)로 나누어집니다. 함수형 컴포넌트로 작성 시에 코드가 매우 짧아지게 되는데, 알아보도록 하겠습니다.

클래스형 컴포넌트

state기능 및 라이프사이클 기능을 사용할 수 있고 임의 메서드를 정의할 수 있다.
render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 jsx를 반환해야 한다
import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { first: Math.ceil(Math.random() * 9), second: Math.ceil(Math.random() * 9), value: '', result: '', }; } onSubmit = () => { e.preventDefault(); if (parseInt(this.state.value) === this.state.first * this.state.second) { this.setState(prevState => { return { result: `정답: ${prevState.value}`, first: Math.ceil(Math.random() * 9), second: Math.ceil(Math.random() * 9), value: '', }; }); } else { this.setState({ result: '땡', value: '', }); } this.input.focus(); }; onChange = e => this.setState({ value: e.target.value }); render() { return ( <React.Fragment> <div> {this.state.first} 곱하기 {this.state.second}? </div> <form onSubmit={this.onSubmit}> <input ref={c => { this.input = c; }} type="number" value={this.state.value} onChange={this.onChange} /> <button>입력!</button> <div>{this.state.result}</div> </form> </React.Fragment> ); } }
JavaScript

함수형 컴포넌트

선언하기가 간편하다.
메모리가 클래스형 컴포넌트보다 덜 사용한다.
import React,{useState, useRef} from 'react'; class App extends React.Component { const [first, setFirst] = useState(Math.ceil(Math.random() * 9)); const [second, setSecond] = useState(Math.ceil(Math.random() * 9)); const [value, setValue] = useState(''); const [result, setResult] = useState(''); const inputEl = useRef(null); const onSubmitForm = (e) => { e.preventDefault(); if (parseInt(value) === first * second) { setResult('정답'); setFirst(Math.ceil(Math.random() * 9)); setSecond(Math.ceil(Math.random() * 9)); setValue(''); inputEl.current.focus(); } else { setResult('땡'); setValue(''); inputEl.current.focus(); } }; return ( <> <div>{first} 곱하기 {second}?</div> <form onSubmit={onSubmitForm}> <input ref={inputEl} type="number" value={value} onChange={(e) => setValue(e.target.value)} /> <button>입력!</button> </form> <div id="result">{result}</div> </> ); }
JavaScript
다음과 같이, 같은 코드를 작성하더라도 함수형 컴포넌트로 작성 시에 코드량이 매우 줄어드는 것을 알 수 있습니다. 그리고 React의 공식문서에서도 가능하다면 함수형 컴포넌트와 Hook을 사용하기를 권장하고 있으니, 특별한 이유가 있지 않다면 함수형 컴포넌트로 작성하시면 되겠습니다.

참고