REACT- REACT 소개 + JSX 문법

❗ 프로젝트 생성하기

터미널에 입력

yarn create react-app <프로젝트명>

 

ex) 프로젝트명이 example-react이면

yarn create react-app example-react

 

생성된 example-react의 src/App.js에 들어가면 

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

 이런 코드가 나오는데, 여기서 import 구문이 사용되었다.

 

import는 특정 파일을 불러오는 것을 의미하고, 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import를 사용하여 다른 파일들을 불러와 사용할 수 있다. 이 기능은 Node.js(브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 환경)에서 지원하는 기능이다. 참고로 Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있다.

 

import를 이용해서 모듈을 불러오는 것은 브라우저에는 없는 기능이다. 이 기능을 브라우저에서도 사용하기 위해 번들러(bundler, 파일을 묶듯이 연결하는 것)를 사용한다. 리액트 프로젝트에서는 번들러 중 주로 웹팩을 사용하는 추세이고, 번들러 도구를 사용하면 import(또는 require)로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일로 생성해준다. 또 최적화 과정에서 여러 개의 파일로 분리될 수도 있다. 

 

웹팩의 로더(loader)라는 기능을 이용해 SVG 파일과 CSS파일도 불러와서 사용할 수 있다. 

1. css-loader : CSS 파일을 불러올 수 있게 해준다.

2. file-loader : 웹 폰트나 미디어 파일 등을 불러올 수 있게 해준다.

3. babel-loader : 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 ES5 문법으로 변환해준다.  => 리액트 컴포넌트에서 사용하는 JSX라는 문법도 정식 자바스크립트 문법이 아니기 때문에 ES5 형태의 코드로 변환해야 한다.

 

import logo from './logo.svg';
import './App.css';
 // SVG파일과 CSS 파일 임포트!
 
//App 컴포넌트 생성 => 애플리케이션 최상위 컴포넌트
//function 키워드를 사용하여 컴포넌트 생성 => 함수 컴포넌트라고 부름.
function App() {
 return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
  
  
  // 컴포넌트를 id가 root인 화면요소에 렌더링한다. 이 요소는 public 디렉토리에
  //index.html에 존재한다.

=> 이 코드는 App이라는 컴포넌트를 만들어 준다. function 키워드를 사용하여 컴포넌트를 생성하였기에 함수 컴포넌트라고 부른다.  프로젝트에서 컴포넌트를 렌더링(보여준다는 의미)하면 함수에서 반환하고 있는 내용을 나타낸다.

함수에서 반환하는 내용을 보면 마치 HTML을 작성한 것과 같으나 이 코드는 HTML이 아니고 JSX라고 부르는 코드이다.

 

❓JSX(JavaScript eXtension)

JSX는 자바스크립트의 확장 문법이며 XML과 매우 유사하며 이런 형식으로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아니고, 바벨에서는 여러 문법을 지원할 수 있도록 preset, plugin을 설정한다. 바벨을 통해 개발자들이 임의로 만든 문법 혹은 차기 자바스크립트의 문법들을 사용할 수 있다.

 

❗ JSX의 장점

1. 보기 쉽고 익숙하다

2. 더욱 높은 활용도

JSX에서는 우리가 알고 있는 div나 span같은 HTML 태그를 사용할 수 있을 뿐만 아니라, 컴포넌트도 JSX안에서 작성할 수 있다. App.js에서는 App 컴포넌트가 만들어졌고 src/index.js를 열어보면 이 App 컴포넌트를 마치 HTML태그 쓰듯이 그냥 작성한다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
// import {App} from './App';
import reportWebVitals from './reportWebVitals';


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

❓ ReactDOM의 render

컴포넌트를 페이지에 랜더링하는 역할을 하며, react-dom 모듈을 불러와 사용할 수 있다.

 

❓React.StrictMode

리액트 프로젝트에서 리액트의 레거시 기능을 사용하지 못하게 하는 기능이다. 이를 사용하면 문자열 ref 등 나중에 완전히 사라지게 될 옛날 기능을 사용했을 때 경고를 출력한다.

 

❗ JSX 문법

1. 감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소로서 하나로 감싸야 한다. 요소 여러 개가 부모 요소 하나에 의하여 감싸져 있지 않으면 오류가 발생한다. 리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 감싸 주어야 하는 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다. <div>태그 요소를 명시하고 싶지 않다면 Fragment라는 기능을 사용하면 된다.

코드 상단 import 구문에서 react 모듈에 들어 있는 Fragment라는 컴포넌트를 추가로 불러온다.

import {Fragment} from "react";
function App(){
 	return(
    	<Fragment>
        	<h1>리액트 안녕</h2>
            	<h2>이렇게 요소 여러개가 있다면 하나의 요소로 묶어줘야 하는데, div 태그를 쓰기 싫으면
            Fragment 기능을 이용하세요. Fragment를 import해주는 것도 잊지 마세용~ </h2>
        </Fragment>

 

2. 자바스크립트 표현

JSX 안에서는 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {}로 감싸면 된다.

function App(){
	const name = "리액트";
    const tag = "자바스크립트 표현식은 이렇게 {}안에 써주면 된답니댜~";
    return (
    	<>
        	<h1>{name}안녕</h1>
            <h2>{tag}</h2>
            <h3>저는 리액트 천재가 될 거에요!</h3>
        </>
    );
 }
 
 export default App;

 

3. if문 대신 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if문은 사용할 수 없지만 조건에 따라 다른 내용을 랜더링 해야할  때는 JSX밖에서 if 문을 사용하여 사전에 값을 설정하거나 {} 안에 조건부 연산자(삼항 연상자)를 사용하면 된다. 

function App(){
  const name = "리액트";
  //const name = "자바";
  return (
    <div>
      {name === "리액트" ? (
        <h1>리액트로 설정되어 있습니다</h1>
      ) : (
        <h1>리액트로 설정되어 있지 않습니다.</h1>
      )}
    </div>
  );
}

4. undefined를 랜더링하지 않기

리액트 컴포넌트 함수에서 undefined만 반환하여 랜더링하는 상황이 발생하면 현재 버전에서는 아무것도 출력되지 않는다. 만약 name이 undefined일 때 보여주고 싶은 문구가 있다면 || 연산자를 사용하면 된다.

function App(){
  //현재 버전에서는 undefined가 명시되어 있을 경우 에러가 아니라 화면에 아무것도 출력되지 않습니다
  //const name = undefined;
  //return name;

  //만약 name이 undefined일때 보여주고 싶은 문구가 있다면
  const name = undefined;
  return (
    <div>
      {name || "리액트"}
    </div>
  );
}

 

5. 인라인 스타일링

리액트 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 한다.

background-color처럼 -문자가 포함되는 속성명은 -를 없애고 카멜 표기법으로 작성해야 한다.

//인라인 스타일링 1.

function App(){
  const name = "리액트";
  //스타일 객체 선언
  const style = {
    backgroundColor : 'black',
    color : 'yellow',
    fontSize : '24px',
    fontWeight : 'bold',
    padding : 16  //단위 생략 시 px
  };
  return (
    <div style={style}>{name}</div>
  );
}

//인라인 스타일링 2.
function App(){
  const name = "코딩왕 김뽀삐";
  return (
    <div style={
      {
        backgroundColor : 'blue',
        color : 'white',
        fontSize : '50px',
        fontWeight : 'bold',
        padding : 16  //단위 생략 시 px
      }
    }>
      {name}
    </div>
  );
}

 

6. class 대신 className

 일반 HTML에서 CSS 클래스를 사용할 때 class 속성으로 사용하지만 JSX에서는 class가 아닌 className으로 설정해 주어야 한다. 

.react{
  color : chartreuse;
  background-color : black;
  font-size : 70px;
  font-weight : bold;
  padding: 150px;
  text-align: center;
}

import './App.css';

function App(){
  const name = "리액트왕 김뽀삐";

  return (
    <div className="react">{name}</div>
  );
}

 

7. 꼭 닫아야 하는 태그

HTML 코드를 작성할 때는 가끔 태그를 닫지 않은 상태로 코드를 작성하기도 하지만, JSX에서는 태그들 닫지 않으면 오류가 발생한다. 반드시 시작태그와 종료태그를 작성해 주어야 한다.

 

8. 주석

JSX 안에서 주석을 작성하는 방법은 일반 자바스크립트에서 주석을 작성할 때와 조금 다르다.  

JSX내부에서 주석을 작성할 때는 {/* 주석 */} 와 같은 형식으로 작성한다.  

function App(){
  const name = "리액트";
  return (
    <>
      {/*주석문 명시 *}
      {/*
      <div 
        className = "react" //시작태그를 여러 줄로 작성하게 된다면 여기에 주석을 작성할 수 있다.
        >
          {name}
        </div>
        {/*///하지만 이런 주석이나
        /* 이런 주석은 페이지에 그대로 출력된다 
  *}
        <br />
        <label>이름</label><input></input><br />
        <label>나이</label><input />
    </>
  );
}