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’}}>안녕하세요!