components vs JSX

alicia-mkkim·2022년 2월 28일
0

components & JSX

components

  • component: 재활용 가능한 UI 구성단위

components 특징

  • 재활용 가능
  • 코드 유지보수에 좋음
  • 페이지 구성을 쉽게 파악
  • 컴포넌트는 또 다른 컴포넌트를 포함 할 수 있음

Components 종류

  • class 형
  • function형

1) Class Component

  • 클래스형 컴포넌트 - render 필수!
import React from 'react'

class Component extends React.Component {
  render() {
    return (
			<div>
				<h1>This is Class Component!</h1>
			</div>
		)
  }
}

export default Component

2) Functional Component

  • React 16.8 버전에서 Hook 기능이 추가되면서 state 사용 가능해짐
import React from 'react'

function Component(){
  return (
			<div>
				<h1>This is Functional Component!</h1>
			</div>
		)
};

export default Component

JSX (Javascript Syntax Extension)

  • 리액트에서 사용하는 자바스크립트 확장 문법
  • 바벨을 통해 일반 자바스크립트 형태로 변환

특징

  • <></> : 모든 요소를 감싸는 최상위 요소!
  • self closing Tag
  • class vs className
  • inline styling <div style={{color : ‘red’}}>안녕하세요!
profile
sin prisa pero sin pausa

0개의 댓글