[React] component 란?? 함수형 컴포넌트, 클래스형 컴포넌트

component 란??

component

리액트는 컴포넌트 기반 아키텍처를 사용하여 UI를 구성합니다. 컴포넌트는 UI의 작은 조각을 나타내며, 다른 컴포넌트와 조합하여 복잡한 UI를 만들 수 있습니다. 이러한 컴포넌트 기반 아키텍처는 코드의 재사용성과 유지 보수성을 높여주는 장점을 가지고 있습니다.

리액트 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있습니다.

 

함수형 컴포넌트

 

 

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

export default App;

 

함수형 컴포넌트는 코드가 간결하고 읽기 쉽다는 장점이 있습니다.

또한, 클래스형 컴포넌트에 비해 메모리 사용량이 적고 성능이 더 우수합니다.

 

함수형 컴포넌트는 상태(state)를 가질 수 없으며, 라이프사이클 API를 사용할 수 없습니다.

이 단점은 리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었습니다.

 

함수형 컴포넌트는 React Hooks를 사용하여 상태를 유지할 수 있습니다. 

React Hooks는 함수형 컴포넌트에서 상태를 유지하고, 이벤트 핸들러를 추가하고, 라이프사이클 메서드를 호출하는 등의 작업을 수행할 수 있도록 해줍니다.

 

 

※ 라이프사이클 메서드는 컴포넌트가 생성, 갱신, 제거되는 과정에서 호출되는 메서드입니다.

클래스형 컴포넌트

importReact,{Component}from'react';

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

 

클래스형 컴포넌트는 state(상태)와 lifecycle methods(라이프사이클 메서드)를 사용하여 UI를 렌더링하고 상호작용합니다.

state는 컴포넌트 내에서 유지되는 데이터를 의미하며, 이를 변경하면 컴포넌트가 다시 렌더링됩니다.

 

클래스형 컴포넌트는 render() 메서드를 사용하여 UI를 반환합니다.

이 메서드는 JSX(JavaScript XML)를 사용하여 UI를 정의할 수 있습니다.

또한, 클래스형 컴포넌트는 props(속성)를 전달받을 수 있습니다.

props는 부모 컴포넌트에서 전달되는 데이터를 의미합니다.

 

클래스형 컴포넌트는 state와 라이프사이클 메서드를 사용하여 복잡한 로직을 구현할 수 있습니다.

그러나 클래스형 컴포넌트는 코드가 길고 복잡해지기 쉽고, 작성하기 어렵다는 단점이 있습니다.

또한, 클래스형 컴포넌트는 함수형 컴포넌트보다 메모리 사용량이 많아 성능이 떨어지기도 합니다.

 

함수형 컴포넌트를 사용할지 클래스형 컴포넌트를 사용할지는 선택사항입니다. 

그러나 최근 리액트에서는 함수형 컴포넌트를 권장하고, 함수형 컴포넌트를 사용하면 코드를 더욱 간결하고 읽기 쉽게 작성할 수 있습니다.