React
에서 컴포넌트는 재사용 가능한 요소이다. 클래스 컴포넌트와 함수 컴포넌트는 둘 다 React 컴포넌트를 생성하는 두 가지 주요 방법이다.
react에서 컴포넌트를 구성할 때 초창기에는 클래스형 컴포넌트를 사용하여 개발을 하였다. 그리고 React 16.8버전이후로React Hooks
를 사용하여 상태와 다른 기능을 함수 컴포넌트에서 사용할 수 있게 되었다.
import React, { Component } from 'react';
class MyComponent extends Component {
//상태값 초기화
constructor(props) {
super(props);
this.state = {
count: 0
};
}
//상태를 변경하는 함수
incrementCount() {
this.setState({ count: this.state.count + 1 });
}
//렌더링 함수로 렌더링
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.incrementCount()}>Increment</button>
</div>
);
}
}
클래스 컴포넌트는 ES6의 클래스로 정의되며, React.Component 클래스를 상속한다. 클래스 컴포넌트는 내부적으로 상태(state)와 생명주기 메서드(lifecycle methods)를 사용할 수 있다.
import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={incrementCount}>Increment</button>
</div>
);
}
this.state
를 사용하여 상태관리하는 클래스형 컴포넌트와 달리 React.hook
을 이용해 간단히 상태관리를 할 수 있으며 간단히 return문에 jsx를 리턴하여 렌더링한다.
간단하고 직관적
이다. 클래스형 컴포넌트는 render()
메서드를 포함하여 몇 가지 추가적인 구문이 필요하지만, 함수형 컴포넌트는 그러한 부가적인 구문이 필요가 없다. this
의 동작 방식은 다른 언어와는 차이를 보이기 때문에 다른 개발자들에게 큰 혼란을 줄 수 있다. 이 때문에 함수형 컴포넌트를 사용하여 보다 혼란을 줄여 주었다.컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 되는 과정을 리액트 생명주기라 얘기하곤 한다.
-constructor
컴포넌트가 만들어지면 가장 먼저 실행되는 메서드
-getDerivedStateFromProps
props 로 받아온 것을 state 에 넣어주고 싶을 때 사용하는 메서드
-render
컴포넌트를 렌더링하는 메서드
-componentDidMount
컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드, 이 메서드가 호출되는 시점에는 우리가 만든 컴포넌트가 화면에 나타남
-getDerivedStateFromProps
props 로 받아온 것을 state 에 넣어주고 싶을 때 사용하는 메서드
-shouldComponentUpdate
컴포넌트를 리렌더링 하는지 여부를 결정하는 메서드
-render
컴포넌트를 렌더링하는 메서드
-componentDidUpdate
render가 완료되었기 때문에 DOM에 접근할 수 있.
-componentWillUnmount
이벤트 리스너를 제거하는 등의 여러 가지 정리 활동을 한다.