JSX & Component

JSX

JSX(JavaScript XML)는 React에서 주로 사용하는 문법

JavaScript 코드 안에서 HTML 같은 구문을 작성

 

// JSX 문
const element = <h1>Hello, world!</h1>;

// Java script 문
const element = React.createElement('h1', null, 'Hello, world!');

같은 h1태그의 Hello, world! 라도 JSX가 더 간결한 것을 볼 수 있으며

가독성이 좋으므로 대부분 JSX문을 사용한다.

Component

UI의 일부분을 독립적으로 재사용할 수 있도록 만드는 기본 단위

컴포넌트는 재사용성과 구조화된 코드 작성을 돕고, 이를 통해 복잡한 UI를 관리하기 쉽게 만들며

컴포넌트는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘어진다.

※함수형 컴포넌트

// 함수형 컴포넌트 
// Greeting.jsx
import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

function으로 시작하는 함수형 컴포넌트 "Hello, !"라는 문구를 출력

// App.js
import Greeting from "./component/Greeting"; // Greeting.jsx 컴포넌트 불러오기
import "./styles.css";

export default function App() {
  return 
  <Greeting name="John" /> // Greeting.jsx 컴포넌트
  ; 
}

App.js에 Greeting 컴포넌트를 불러오고 해당 컴포넌트에 "John"인 name을 지정해주면 

"Hello,John!" 이라는 문구 출력

 

※클래스형 컴포넌트

// 클래스형 컴포넌트
// Greeting.jsx
import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Greeting;

class로 시작하는 클래스형 컴포넌트 render 메서드를 포함하고, import에 { Component }가 들어가야한다.

위에 함수형 컴포넌트와 동일하게 "Hello, !"라는 문구를 출력

// App.js
import Greeting from "./component/Greeting"; // Greeting.jsx 컴포넌트 불러오기
import "./styles.css";

export default function App() {
  return 
  <Greeting name="John" /> // Greeting.jsx 컴포넌트
  ; 
}

App.js 와 결과 값은 함수형 컴포넌트와 동일

 

* 이전에는 상태 관리(State)나 생명주기 메서드(Lifecycle Methods)를 사용하기 위해 클래스형 컴포넌트가 필요했지만

훅(Hooks)이 도입되면서 함수형 컴포넌트를 주로 사용한다.

 

 

리액트 컴포넌트 규칙

함수의 제목은 대문자로 시작

함수에서 렌더링 가능한 값이 반환