TIL React #2 Component 와 JSX

Component

Component 란 무엇인가?

한마디로 요약하자면 재활용이 가능한 UI 구성 단위이다.

함수 혹은 class로 선언하며 반복되는 요소가 있다면 컴포넌트로 생성하여 재사용하게 된다면 매우 생산적이고 효율적일 것이다.

Component의 특징

재활용하여 사용이 가능하다.

코드 유지보수에 좋다.

해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.

컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 - 자식 관계)

Class 형 vs 함수형

컴포넌트를 선언하는 방식에는 class 형(Class Component)과 함수형(Functional Component)이 있다.

class component

클래스형 컴포넌트는 render함수가 꼭 있어야한다. 그리고 그안에 JSX를 반환한다.

import React from 'react'

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

---

Functional Component

함수형 컴포넌트가 보기에는 훨씬 간단하고 작성하기 편리한 장점이 있다.

import React from 'react'

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

export default Component

JSX

JSX란 무엇인가?

리액트에서 사용하는 javaScript Syntax Extension 즉, 자바스크립트 확장 문법이다.

형태는 html과 javaScript가 합쳐져 있는것 처럼 보인다.

JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태로 변환된다.

바벨이란?
바벨은 자바스크립트 es6 문법을 es5로 변환해주는 트렌스파일러(transpiler) 입니다. 이것을 통해 React를 일반 브라우저에서 실행시킬 수 있습니다. babel 공식 사이트에서 간단하게 es6 문법으로 변환된 자바스크립트 코드를 확인할 수 있습니다.

JSX의 장점

html 태그를 토대로 사용하기 때문에 보기 쉽고 익숙하다.
html 태그를 사용하는 동시에 자바스크립트도 JSX 안에서 동작하게 할 수 있다.

JSX 를 사용할 때 중요한 것들

1. 자바스크립트를 사용할 때 { }를 사용한다.
2. css의 class와 class형 컴포넌트가 이름이 겹치기 때문에 기존의 class는 => className으로 사용한다.
3. inline 스타일링 할 때에는 <div style={{color : "red"}}>Hello React</div> 와 같이 { }안에 한번더 Bracket을 사용한다.
4. closing tag 꼭 사용하기 <div />
5. JSX를 사용할 때에는 내부요소를 감싸는 최상위 요소가 있어야한다.

<> Fragments : 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 자식들을 간단하게 그룹화 할 수 있는 기능이다. 의미없는 div태그의 생성을 막을 수 있어 유용하다.

---