TIL-2024.04.24 - React - 001. React 와 JSX

 

 

질문:

1. React 만의 특징이 뭐야? 

2. 그래서 JSX가 뭐야?

 

 

 

React 의 특징

1. 가상 DOM (Virtual DOM):
   - React의 핵심 개념 중 하나는 가상 DOM.
   - 가상 DOM은 실제 DOM의 가벼운 복제로, 상태 변경 시 전체 DOM을 새로 그리는 대신에 변경 사항을 비교하고 최소한의 업데이트만 수행
   
   
2. JSX (JavaScript XML):
   - React에서는 JSX를 사용하여 UI를 작성.
   - JSX는 JavaScript의 확장 문법으로, HTML과 유사하게 생겼지만 JavaScript의 모든 기능을 사용.
   - JSX를 사용하면 UI 코드를 가독성 있고 유지보수가 쉬운 형태로 작성.
   
   
3. 컴포넌트 기반 아키텍처:
   - React는 컴포넌트 기반 아키텍처를 기반.
   - 이는 UI를 독립적인 요소로 구성하여 개발과 유지보수를 용이.
   - 각 컴포넌트는 자체적으로 상태를 가질 수 있고, 재사용이 가능.
   
   
4. 단방향 데이터 흐름 (One-way Data Binding):
   - React는 데이터의 흐름을 단방향으로 유지.
   - 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터를 전달하고, 자식 컴포넌트에서는 상위 컴포넌트의 상태를 변경 불가.

 

 

JSX:

- JavaScript 코드 안에 XML과 유사한 구문을 사용하여 UI 컴포넌트를 정의할 수 있게하는 문법

- 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 Babel을 사용해 일반 JS형태로 변환 

 

// JSX
function App() {
  return (
    <div>
      Hello <b>React </br>
    </div>
  );
}
// 위의 코드는 아래의 코드와 같이 변환됨

// 코드 실행 
function App() {
  return React.createElement(
    "div",
    null,
    "Hello",
    React.createElement("b", null, "react")
  );
}

 

- 매 순간마다 이처럼 createElement 함수를 사용해야된다면, 불편하기에 JSX를 통해 편하게 렌더링 가능.

 

 

 

기본 예제

// JSX 코드
const element = <h1>Hello, World!</h1>;

// 변환된 JavaScript 코드
const element = React.createElement('h1', null, 'Hello, World!');

 

 

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

 

 

 

 

연산자 - 조건부 : 

- JSX 내부에서 if 문을 사용할 수 없기에, JSX 밖에서 if문을 사용해 사전에 값을 설정하거나, {} 안에서 삼항 연산자로 조건부 사용

 

import React from 'react';

function App(){
  const name = "리액트"
  return (
    <div>
    {name === '리액트'? (<h1> 리액트 입니다 </h1>) : (<h2>리액트가 아닙니다 </h2>) }
    </div>
  );
}

 

연산자 - && :

import 'React' from 'react';

function App(){
  const name = "리액트"
  return (
    <div>
    {name === '리액트' && <h1>리액트 입니다</h1>}
    </div>
  );
}

 

 

 

 

 

표현식으로 JSX:

- 컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식

 

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

 

 

 

 

JSX 속성 정의:

 

const element = <a href="https://www.reactjs.org"> link </a>;


const element = <img src={user.avatarUrl}></img>;

 

 

 

 

 

답변:

1. React 만의 특징이 뭐야? 
- JSX 사용

- 단방향 데이터 바인딩

 

2. 그래서 JSX가 뭐야?

- JS 코드 안에서 UI 컴포넌트를 정의할 수 있는 문법