[React] 02. 리액트 컴포넌트(Component)
오늘은 리액트 컴포넌트에 대해 공부해보려고 합니다.
컴포넌트(Component)를 다루기 전에 state
와 props
개념만 간단히 정리해보려고 합니다.
💚 state와 props
리액트(React)
는 state
와 props
를 사용하여 데이터를 저장하거나 처리하는 작업을 간단하게 수행할 수 있는데요.
state : 동적인 데이터를 다룰 때 사용
props : 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터
💚컴포넌트(Component)
리액트(React)
에서 컴포넌트를 선언하는 방법은 두가지가 있습니다.
함수형 컴포넌트
클래스형 컴포넌트
💛함수형 컴포넌트
함수형 컴포넌트
는 아래와 같은 방법으로 선언할 수 있습니다.
function App() {
return (
<div>
<h1>안녕하세요!</h1>
<h2>우든이 블로그입니다.</h2>
</div>
);
}
또는, 앞에서 다루었던 화살표 함수
를 통해 선언할 수 있어요!
const App = () => {
return (
<div>
<h1>안녕하세요!</h1>
<h2>우든이 블로그입니다.</h2>
</div>
);
}
함수형 컴포넌트
를 사용하면 클래스형 컴포넌트
를 사용하는 것보다 선언이 편하고 메모리 낭비가 적다는 장점이 있지만, state
와 라이프사이클
기능 사용이 불가능하다는 단점이 존재합니다.
하지만, 위와 같은 문제는 Hooks
가 도입되면서 해결될 수 있었는데요. 이부분은 뒤에서 좀 더 자세히 공부해보려고 합니다.
✔ 리액트 공식문서에는 함수형 컴포넌트
와 Hooks
사용을 권장한다고 합니다.
💛클래스형 컴포넌트
클래스형 컴포넌트
에는 render()
함수가 필요한데요!
클래스형 컴포넌트
를 사용하면 state
와 라이프사이클
을 사용할 수 있고 임의의 메서드를 정의할 수 있다는 장점이 있습니다.
class App extends React.Component {
render(){
return(
<div>
<h1>안녕하세요!</h1>
<h2>우든이 블로그입니다.</h2>
</div>
);
}
}
참고 자료 및 사이트
Author And Source
이 문제에 관하여([React] 02. 리액트 컴포넌트(Component)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@shyunju7/react02저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)