[React] 함수 컴포넌트 vs 클래스 컴포넌트

리액트에서 컴포넌트를 선언하는 2가지 방식에는 다들 알다시피 함수 컴포넌트와 클래스 컴포넌트가 있다. 

이에 대해 리액트 킹식문서에서 설명하고 있는데, 잘 정리해보자...

 

함수 컴포넌트와 클래스 컴포넌트의 차이점

1. 선언 방식

함수 컴포넌트

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

클래스 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

• 클래스 키워드 필요
• Component로 상속받아야 함
• render() 메소드 필요 ⭐

React의 관점에서 볼 때 위 두 가지 유형의 컴포넌트는 동일하게 동작한다.

 

2. 일반적 차이

클래스 컴포넌트

• state, lifeCycle 관련 기능 사용 가능하다.
• 메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.
• 임의 메서드를 정의할 수 있다.

함수 컴포넌트

• state, lifeCycle 관련 기능 사용 불가능 [16.8.0 버전 이후 Hook을 통해 해결 됨]
• 메모리 자원을 함수형 컴포넌트보다 덜 사용한다. (간결!)
• 컴포넌트 선언이 편하다. (그냥 Javascript 함수 쓰면 됨)

함수형이 클래스형보다 후에 나왔기 때문에 더 편하기도 하고, 클래스 컴포넌트는 현재 자주 사용하지 않지만 사용하는 기업들이 있다. 그 프로젝트의 유지보수를 위해서는 클래스형 컴포넌트에 대해 알아둘 필요는 있다.

 

3. state 사용 차이

클래스 컴포넌트

• constructor 안에서 this.state 초기값 설정 가능

constructor(props) {
	super(props);
    
    this.state = {
    	monsters: [],
        userInput: ""
    };
}

• constructor 없이 바로 state 초기값 설정 가능
• 클래스형 컴포넌트의 state는 객체 형식

class Monsters extends Component {
	state = {
		monsters: [],
		userInput: ""
	};
}

• this.setState 함수로 state의 값 변경 가능

onClick = {() => {
	this.setState({number:number+1});
}}

함수 컴포넌트

• 함수형 컴포넌트에서는 useState 함수로 state를 사용
• useState 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태
• 두 번째 원소는 상태를 바꾸어 주는 함수

const [message, setMessage] = useState('');

 

4. props 사용 차이

props

• 컴포넌트의 속성을 설정 할 때 사용하는 요소
• 속성을 나타내는 데이터
• 컴포넌트 자체 props를 수정해서는 안 됨 (함수, 클래스 모두)
• 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 함

순수 함수 : 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과 반환

// 순수 함수 O
function sum(a, b) {
  return a + b;
}

// 순수 함수 X => 자신의 입력값을 변경하기 때문
function withdraw(account, amount) {
  account.total -= amount;
}

 

 

클래스 컴포넌트의 props

• this.props로 통해 값을 불러올 수 있음
• 부모 객체의 키 값, 자식 props 활용
• 항상 props로 기본 constructor를 호출해야 합

class MyComponent extends Component {
	render() {
    	const {name, height, hobby} = this.props;
        return (
        	<div>
            	안녕하세요, 제 이름은 {name}입니다.<br />
                제 키는 {height}이고, 취미는 {hobby}입니다.
            </div>
        );
    }
}

함수 컴포넌트의 props

• props를 불러올 필요 없이 바로 호출 가능

const MyComponent = ({ name, height, hobby }) => {
	return (
    	<div>
        	안녕하세요, 제 이름은 {name}입니다.<br />
        	제 키는 {height}이고, 취미는 {hobby}입니다.
        </div>
    );
};

 

5. 이벤트 핸들링

클래스 컴포넌트

• 함수 선언시 에로우 화살로 바로 선언 가능
• 요소에서 적용하기 위해서는 this를 붙여야 함

handleChange = e => {
	this.setState({
    	message: e.target.value
    });
}

handleClick = () => {
	alert(this.state.message);
	this.setState({
		message: ''
    });
}

render() {
	return (
    	<div>
			<input type"text" name="message" value={this.state.message} onChange={this.handleChange} />
			<button onClick={this.handleClick}>확인</button>
        </div>
    );
}

 

함수 컴포넌트

• const 키워드 + 함수 형태로 선언해야 함
• 요소에서 적용하기 위해서는 this가 필요 X

const onClick = () => {
	alert(message);
	setMessage('');
}

const onKeyPress = e => {
	if(e.key === 'Enter') {
    	onClick();
    }
}

return (
	<div>
		<input type"text" name="message" value={message} onChange={onChangeMessage} onKeyPress={onKeyPress} />
		<button onClick={onClick}>확인</button>
	</div>
);

 

6. LifeCycle

LifeCycle

라이프 사이클... 생명주기... 단어만으로도 어렵다.

 

•  React에서 컴포넌트는 여러 종류의 "생명주기 메소드" 를 가지며 이 메소드를 오버라이딩(상속하여 재정의) 하여 특정 시점에 코드가 실행되도록 설정한다.
• 클래스 컴포넌트에만 해당되는 내용이며, 함수형 컴포넌트는 Hook를 사용하여 생명주기에 원하는 동작을 한다.

자세한 건 다음에 알아보자