Component

1. 컴포넌트(Component)

1-1. 컴포넌트의 정의

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

1-2. 컴포넌트의 특징

• 재활용하여 사용할 수 있다.
• 코드 유지보수에 좋다.
• 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.
• 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)

2. 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'

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

export default Component

• 함수형 컴포넌트의 경우 return 통해 JSX를 반환합니다.

JSX

1. JSX 정의

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

2. JSX 장점

• HTML 태그를 그대로 사용하기 때문에 보기 쉽고 익숙합니다.
• HTML 태그를 사용하는 동시에 자바스크립트도 JSX 안에서 동작하게 할 수 있습니다.(DOM + Event 형태)

3. JSX 특징

• 자바스크립트 표현 : { ... javascript... }

• class vs. className

• Inline Styling : <div style={{color : "red"}}>Hello React</div>

• Self Closing tag : <div></div> vs. <div />

• 모든 요소를 감싸는 최상위 요소 (React Fragments : <> ... </>)

  : JSX의 큰 특징 중 하나는 내부 요소들을 감싸는 최상위 요소가 있어야 합니다. Fragments는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 자식 요소들을 간단하게 그룹화 할 수 있습니다. 요소들을 감싸는 div 태그의 불필요한 생성을 막을 수 있습니다.

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