[React]리액트 'JSX 문법' 사용하기

리액트 'JSX 문법'

JSX 기본 구조

 

 HTML과 유사한 구조를 가지면서 JavaScript 코드를 통합 해서 사용할 수 있는 확장 문법이다

리액트에서는 JSX( JavaScript의 확장 문법 ) 을 사용해서 UI를 구조를 선언한다

 

 

리액트 파일을 만들면 src 안에 기본적으로 포함되어있는

App.js는 위와 같이 생겼다

 

리액트에서 레이아웃을 만들기 위해서는

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
    //여기에 코드 작성하기!
    </div>
  );
}

export default App;

 

function App() 안에 있는 return() 문 안에 작성을 해주어야 한다

하지만 변수 같은 경우, return() 밖에 작성 해주어야하고

 

return() 안에서는 병렬로 태그가 2개 이상 기입이 불가능하다

 

JSX 에서 클래스 작성하기

 

html 에서는 Class 태그를 사용하려면

'class = 사용할 클래스 명' 으로 작성해주었는데 

   <div class="black-nav">

 

리액트에서 클래스 명을 작성하려면 class 가 아닌 className 으로 작성해주어야한다

   <div className="black-nav">

 

JSM 에서 변수 작성하기

 

리액트에서 변수를 선언하고 사용하는 방법은 JavaScript와 유사하다

JSM에서는 데이터 바인딩을 통해서 변수, 상태(state), 함수 등을 동적으로 값을 삽입하거나 생성이 가능하다

 

변수 사용 하기

import React, { useState } from 'react';

function MyComponent() {
  // 일반적인 변수 선언
  const message = 'Hello, React!';
  
  return (
    <div>
      <p>{message}</p>
    </div>
  );
}

 

데이터를 입력 할 때는 반드시 { 중괄호 } 안에 작성해주어야한다

const username = "John";
const element = <p>Hello, {username}!</p>;

결과 : <p>Hello, John!</p>

 표현식 사용 하기

const x = 10;
const y = 20;
const element = <p>The sum is {x + y}.</p>;

결과 : <p>The sum is 30.</p>

함수 호출하기

function greet(name) {
  return `Hello, ${name}!`;
}
const element = <p>{greet("Alice")}</p>;

<p>Hello, Alice!</p>

조건부 렌더링

{ 조건 ? true 출력 하고 싶은 코드: false 출력 하고 싶은 코드 }

const isLoggedIn = true;

const element = (
  <div>
    {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
  </div>
);

 

isLoggedIn이 True 이면 Welcome back! 를, False 일 경우, Please log in.

 

함수형 컴포넌트에서의 변수 선언

import React, { useState } from 'react';

function MyComponent() {
  // useState 훅을 사용하여 상태(state) 선언
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

 

클래스형 컴포넌트에서의 변수 선언

import React, { Component } from 'react';

class MyComponent extends Component {
  // 클래스형 컴포넌트에서는 state를 사용하여 변수 선언
  state = {
    count: 0,
  };

  // 일반적인 클래스 멤버 변수 선언
  message = 'Hello, React!';

  render() {
    return (
      <div>
        <p>{this.message}</p>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}