[React] React JSX, 컴포넌트

React란?

React.js

React는 FaceBook에서 개발한 오픈 소스 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용됩니다. 주로 단일 페이지 애플리케이션(SPA)에서 사용되며, 컴포넌트 기반 아키텍처를 통해 UI를 효율적으로 관리할 수 있도록 돕습니다.

 

특징

• 컴포넌트 기반 : UI를 독립적인 재사용 가능한 컴포넌트로 나누어 개발할 수 있습니다.
• 가상 DOM : 변경 사항을 효율적으로 관리하기 위해 실제 DOM을 업데이트하기 전에 가상 DOM에서 변경 사항을 비교합니다.
• 단방향 데이터 흐름 : 데이터가 부모 컴포넌트에서 자식 컴포넌트로 흐르며, 이를 통해 데이터 흐름을 명확하게 유지할 수 있습니다.

---

React 설치 방법

Node.js가 이미 설치되어 있다고 가정하고 진행합니다.

1. 폴더 생성 : React를 설치할 폴더를 생성합니다.
2. 터미널 열기 : 생성한 폴더로 이동하고, 터미널에서 아래 명령어를 입력하여 React를 설치합니다.

npm init react-app .

 

마침표(.)는 현재 디렉토리에서 프로젝트를 만들겠다는 의미입니다.

react-app 폴더에 프로젝트 생성 중

"React"라는 폴더명은 공식 라이브러리 이름과 동일하므로, React 앱을 생성하는 과정에서 충돌이 발생할 수 있습니다.

---

JSX란?

JSX는 자바스크립트의 확장 문법입니다. React 코드를 작성할 때 HTML 문법과 비슷한 JSX 문법을 활용하면 편리하게 화면에 나타낼 코드를 작성할 수 있습니다.

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<h1>Hello World</h1>
);

 

JSX 문법

 

JSX는 자바스크립트로 HTML과 같은 문밥을 사용할 수 있지만 지켜야 할 규칙들이 있습니다.

 

HTML과 다른 속성명

속성명은 카멜 케이스로 작성을 해야합니다. 여러 단어가 조합된 HTML 속성들이 많진 않지만, `onclick`, `onblur`, `onfocus` 등의 이벤트 속성들을 `onClick`, `onBlur`, `onFocus`, `onMouseDown`처럼 작성을 해야 합니다.

<button onClick= ... >클릭!</button>

 

단, 예외적으로 HTML에서 비표준 속성을 다룰 때 활용하는 data-* 속성은 카멜 케이스가 아닌 기존의 HTML 문법 그대로 작성하면 됩니다.

<button className="btn" data-name="휘철">휘철</button>
<button className="btn" data-name="은주">은주</button>

 

자바스크립트 예약어와 같은 속성명 사용 불가

JSX 문법은 자바스크립트 문법이기 때문에 예약어와 같은 속성명을 사용할 수 없으므로, 반복문과 겹치는`for`의 경우 `htmlFor`, 자바스크립트 클래스 키워드와 겹치는 `class`는 `className`으로 작성해주어야 합니다.

<form>
    <label htmlFor="name">이름</label>
    <input id="name" className="name-input" type="text" />
</form>

 

Fragment - 하나의 요소로 감싸기

JSX 문법을 활용할 때는 반드시 하나의 요소로 감싸주어야 합니다. 그래서 아래 코드처럼 여러 개의 요소를 작성하면 오류가 발생합니다.

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<h1>Hello World</h1>
    <p>Hello React</p>
);

 

이럴 땐 아래 코드처럼 여러 태그를 감싸는 부모 태그를 만들어 하나의 요소로 만들어야 합니다.

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <div>
        <h1>Hello World</h1>
        <p>Hello React</p>
    </div>
);

 

하지만 이렇게 `div` 태그로 감싸면 필요하지 않는 태그가 작성되는 것이라, 이럴 경우에는 `Fragment`로 감싸주면 부모 태그를 만들지 않아도 여러 요소를 작성할 수 있습니다.

<Fragment>
    <h1>Hello World</h1>
    <p>Hello React</p>
</Fragment>

 

`Fragment`태그를 아래 코드처럼 단축하여 사용할 수도 있습니다.

<>
    <h1>Hello World</h1>
    <p>Hello React</p>
</>

 

자바스크립트 표현식

JSX 문법에서는 중괄호 {}를 활용하면 자바스크립트 표현식을 넣을 수 있습니다.

import ReactDOM from 'react-dom/client';

const name = '시니철';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <h1>Hello {name}</h1>
);

// 화면에는 "Hello 시니철" 출력됨

 

자바스크립트 표현식을 잘 활용하면 아래 코드처럼 문자열을 조합할 수 있고, 변수에 이미지 주소를 할당하여 `img`태그의 `src`속성값에 전달할 수 있고, 이벤트 핸들러를 등록할 수도 있습니다.

import ReactDOM from 'react-dom/client';

const hello = 'Hello';
const name = '시니철';
const imageUrl = 'https://hwiiron.com/hwiiron.png';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <h1>{hello + name}</h1>
    <img src={imageUrl} alt="시니철 사진"/>
    <button onClick={click}>확인</button>
  </>
);

 

중괄호 안에서 `for`,` if`문 등 문장은 다룰 수 없지만, 조건문, 반복문을 꼭 사용해야 한다면 조건 연산자와 배열의 반복 메소드를 활용하면 됩니다.

---

React 컴포넌트

React 컴포넌트는 React Element를 조금 더 자유롭게 다루기 위한 중요한 문법입니다. 컴포넌트는 재사용 가능한 UI 요소를 정의하는 데 사용되며, 이를 통해 코드의 효율성과 유지보수성을 높일 수 있습니다.

 

함수형 컴포넌트

React에서 컴포넌트를 만드는 가장 간단한 방법은 자바스크립트의 함수를 활용하는 것입니다. 함수형 컴포넌트는 JSX 문법으로 작성된 요소를 반환하며, 아래 코드에서 Hello 함수가 하나의 컴포넌트입니다.

import ReactDOM from 'react-dom/client';

function Hello() {
    return <h1>Hello World</h1>
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <Hello />
    <Hello />
    <Hello />
  </>
);

 

위 코드에서 Hello라는 함수는 `h1`태그를 반환하는데, 이 함수가 하나의 React 컴포넌트가 됩니다. 이를 `<Hello />` 형태로 호출하여 마치 `HTML`태그처럼 사용할 수 있습니다.

 

컴포넌트의 장점

• 재사용성 : 컴포넌트를 하나의 블록처럼 재사용 할 수 있습니다. 예를 들어, 위 코드에서 `<Hello />`를 여러 번 호출하여 여러 번 렌더링할 수 있습니다.
• 독립성 : 컴포넌트는 각각 독립적인 기능을 가지므로, 각 컴포넌트에만 집중하여 코드를 작성할 수 있습니다. 

 

컴포넌트 모듈화

React의 컴포넌트는 모듈화할 수 있습니다. 각 컴포넌트를 개별 파일에 작성하고, 필요한 곳에서 불러와 사용할 수 있습니다. 아래 예시는 `Img 컴포넌트`를 App에서 불러와 사용하는 방식입니다.

// image.js
import hwiironImg from './assets/hwiiron.svg';

function Img() {
  return <img src={hwiironImg} alt="시니철" />;
}

export default Hwiiron;

// App.js
import Img from './image';

function App() {
  return (
    <div>
      <Img />
    </div>
  );
}

export default App;

 

컴포넌트의 네이밍 규칙

React에서 컴포넌트의 이름은 반드시 첫 글자가 대문자로 시작해야 합니다. 만약 첫 글자가 소문자라면, React는 `HTML`태그로 인식하여 오류가 발생할 수 있습니다.