[React] JSX, 컴포넌트 (클래스,함수)

JSX란?

JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. 그렇기에 더 엄격하다.

• JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
• 하나의 파일에 자바스크립트, HTML을 동시에 작성

코드 예시

import React from 'react';

function HelloWorld() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}
// babel이 JavaScript로 해석하여 준다.

export default HelloWorld;

• 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나가 감싸는 형태여야 하기 때문에 div태그로 감싸주었다. 혹은 <>와 같은 Fragment태그로 감싸도 된다.

컴포넌트란?

• 리액트는 화면 요소들을 다양한 수준의 컴포넌트로 분할함으로써 재사용성과 유지보수성을 높이는 방식을 채택한다.
• 클래스 컴포넌트 , 함수 컴포넌트 2가지를 지원하는데 클래스 컴포넌트는 과거에 많이 썼지만 현재는 함수 컴포넌트로 완전히 대체되어 함수 컴포넌트를 쓴다. 하지만 클래스 컴포넌트로 쓰여진 과거 코드도 읽을 줄 알아야 하기 때문에 클래스 컴포넌트 방식도 알아야한다!!😂

클래스 컴포넌트

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  decrement = () => {
    this.setState({ count: this.state.count - 1 });
  }

  render() {
    return (
      <div>
        <h1>Counter</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.decrement}>Decrement</button>
      </div>
    );
  }
}

export default Counter;

1. React와 Component를 'react' 라이브러리에서 가져온다.
2. Counter라는 클래스 컴포넌트를 정의한다.
3. 컴포넌트 상태를 0으로 초기화한다.
4. 증가와 감소 메서드를 정의하고, 각각 setState를 사용하여 count 상태를 업데이트한다.
5. render에서 컴포넌트의 JSX를 return 해주고 현재 카운트와 카운트를 증가 및 감소시키는 두 개의 버튼을 표시한다.
6. 버튼의 onClick 이벤트 핸들러는 증가 및 감소 메서드를 호출한다.

함수 컴포넌트

import React, { useState } from 'react';

const Counter => () {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  }

  const decrement = () => {
    setCount(count - 1);
  }

  return (
    <div>
      <h1>Counter</h1>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

1. React와 useState를 'react' 라이브러리에서 가져온다.
2. Counter라는 함수 컴포넌트를 정의한다.
3. useState 훅을 사용하여 count와 setCount라는 변수를 선언한다. 이를 통해 컴포넌트의 상태를 관리한다.
4. increment와 decrement 함수를 정의하고, 각각 setCount를 사용하여 count 상태를 업데이트한다.
5. render 함수 대신, JSX를 return하여 컴포넌트의 UI를 정의한다. 현재 카운트와 카운트를 증가 및 감소시키는 두 개의 버튼을 표시한다.
6. 버튼의 onClick 이벤트 핸들러는 increment 및 decrement 함수를 호출한다.

차이점

• import {Component} from 'react' 와 {useState}로 컴포넌트와 useState를 따로 임포트한다.
• 클래스 컴포넌트에서는 render 메서드에서 JSX를 return한다.
• 클래스 컴포넌트는 this.state로 상태 선언을 하고 함수 컴포넌트는 [state],[setState]와 같은 구조분해로 상태선언 useState를 사용한다.