TIL | React 03 / Component & JSX

Component

---

component란? 재활용 가능한 UI 구성 단위

• ex. instagram 메인 페이지
  • 예를 들어, instagram main 페이지를 Component로 나눈다면,
  • 크게 Nav 컴포넌트와 Main 컴포넌트, 그리고 Main 컴포넌트 안에는 Feed 컴포넌트와 MainRight 컴포넌트로 나눌 수 있다
  • 이와 같이 화면의 구성 요소들을 컴포넌트로 나눌 수 있다
    
    

Component의 두가지 종류 Class vs. Functional Component

---

컴포넌트의 종류, 즉 컴포넌트를 선언하는 방식에는 두 가지가 있다

• Class형 컴포넌트 (Class Component)
• 함수형 컴포넌트 (Functional Component)

1) Class Component

import React from 'react'

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

export default Component

• 클래스형 컴포넌트에서는 위와같이 render 함수가 꼭 있어야 하고, 그 안에 보여 주어야 할 JSX를 반환한다

2) Functional Component

import React from 'react'

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

export default Component

• 함수형 컴포넌트는 클래스형 컴포넌트에 비해서 훨씬 간단하고 단순하지만 state를 관리하지 못한다는 단점으로 인해 잘 사용되지 않는다
• 하지만 React 16.8 버전에서 Hook 기능이 추가되면서 함수형 컴포넌트에서도 state를 사용할 수 있게 되었고 그 후부터 클래스형 컴포넌트보다는 함수형 컴포넌트가 더 많이 사용되기 시작했다

JSX

---

• JavaScript Syntax Extension
• JSX란 리액트에서 사용하는 자바스크립트 확장 문법이다
• JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다
• cf) 바벨(Babel)

JSX 특징

• 자바스크립트 표현 : { ... javascript... }
• class vs. className
• Inline Styling : <div style={{color : "red"}}>Hello React</div>
• Self Closing tag : <div></div> vs. <div />
• 모든 요소를 감싸는 최상위 요소 (cf. React Fragments : <> ... </>)
  : JSX의 큰 특징 중 하나는 내부 요소들을 감싸는 최상위 요소가 있어야 한다고 배웠다
  Fragments는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 요소(자식)들을 간단하게 그룹화 할 수 있는 기능이다
  요소들을 감싸는 div 태그의 불필요한 생성을 막을 수 있어 유용하게 사용된다
  

<>
  <div className="loginBtn" onClick={() => console.log("click")}>Login</div>
  <br />
  <div style={{backgroundColor: "grey", height: "10px"}} />
</>