1. 프로그래밍 방식
선언적
무엇을 해결할 것인가에 중점을 두는 방식.
- 리액트
절차적
문제를 어떻게 해결할 것인가에 중점을 두는 방식.
- 바닐라 자바스크립트
Component
컴포넌트란 재활용이 가능한 UI 구성 단위를 의미한다. UI를 나누어 각각 개별적으로 사용할 수도 조립하여 사용할 수도 있다.
독립적으로 사용할 수 있기 때문에 코드의 유지보수에 좋습니다.
종류
Class Component(클래스 컴포넌트)
// App.js
import React from 'react';
class App extends React.Component {
render() {
return <h1>This is Class Component!</h1>;
}
}
export default App;위와 같이 반드시 render() 메서드가 있어야 하고, 그 안에서 화면에 보여줄 JSX(Javascript Syntax eXtension) 를 반환한다. state 및 lifecycle API를 통해 관련 기능을 사용할 수 있음.
Function Component(함수 컴포넌트)
// App.js
import React from 'react';
const App = () => {
return <h1>This is Function Component!</h1>;
};
export default App;render() 메서드 없이 JSX를 반환하는 방식으로, 클래스 컴포넌트에 비해서 훨씬 간단하고 단순하지만 state와 라이프사이클을 관리하지 못한다는 단점이 있다. 하지만 Hook 기능이 추가되면서 함수 컴포넌트에서도 state를 사용할 수 있게 되었고, 지금은 클래스 컴포넌트 보다 함수 컴포넌트를 더 많이 사용하게 됨.
사용
리액트는 소문자로 시작하는 요소를 HTML 태그로 인식하기 때문에 컴포넌트명은 항상 첫 글자가 대문자가 되도록 작성해야 합니다.
hi