리액트 입문기 - 컴포넌트의 종류
컴포넌트는 특정부분이 어떻게 생기지를 정하는 선언체를 말합니다. 컴포넌트는 클래스형, 함수형 두가지가 존재합니다. 지금부터 컴포넌트에 대해서 자세히 알아보겠습니다.
클래스형 컴포넌트
클래스형 컴포넌트의 경우 state기능 및 라이프 사이클 기능을 사용할 수 있습니다.
클래스형 컴포넌트는 render함수가 꼭 있어야 하고, 그안에 보여주어야 할 JSX를 반환해야합니다.
아래는 클래스형으로 작성한 컴포넌트 입니다.
import React, { Componenet } from 'react'; class App extends Component { render(){ const name = 'react'; return <div className='react'>{name}</div> } }
함수형 컴포넌트
함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 쉽고 메모리 자원도 덜 사용합니다. 하지만 클래스형에서 사용하느 state 와 라이프사이클 API를 사용하지 못한다는 단점이 있습니다. 하지만 v16업데이트 후 Hooks기능이 도입되면서 해결이 되었습니다.
아래는 함수형으로 작성한 컴포넌트 입니다.
import Reactfrom 'react'; function App{ const name = 'react'; return <div className='react'>{name}</div> }
참고문서
리액트를 다루는 기술
Author And Source
이 문제에 관하여(리액트 입문기 - 컴포넌트의 종류), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rkgus3575/리액트-입문기-컴포넌트저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)