[리액트를 다루는 기술] 3. 코드이해하기

1. 코드 열어보기

만든 플젝트를 연후 src/App.js 파일을 열어보자

 

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

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>
  );
}

export default App;

 

여기서 코드를 하나씩이해해본다

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

import  구문이 사용할시 다른 파일들을 불러와 사용할수있다.

이렇게 모듈들을 불러와서 사용할수있는건 브라우저에 없는 기능이였다

브라우저가 아닌 환경인 Node.js에서 사용해온방법이다. (requrire 구문으로 import)

 

이러한 기능을 브라우저에서 사용하기위해 번들러를 사용한다.

번들러를 사용하면  import로 모듈을 불러왔을때 불러온 모듈들을 모두 합쳐서 하나의 파일로 생성해준다

 

여기서는 대표적인 번들러로 웹팩을 사용했다

 

웹팩의 로더기능 ( 파일들을불러오는 역활을한다)

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

2. file-loader :  웹 폰트, 미디어파일을 불러올수있게한다

3. babel-loader : 최신자바스크립트 문법으로 작서된코드를 바벨도구로 이용하여 ES5 문법으로 변환

 

 

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>
  );
}

export default App;

function 키워드를 사용하여  컴포넌트를 만들었다

이러한 컴포넌트를 함수 컴포넌트라고한다

즉 프로젝트에서 컴포넌트를 렌더링(보여준다) 하면 함수에서 반환하고있는 내용을 나타냅니다.

export default App;

 

 

여기서 보이는 HTML문법같은것들은 JSX라고 부른다

 

 

 

2. JSX란?

JSX란 자바스크립트 확장문법으로 XML이랑 매우 비슷하게 생김

이코드는 브라우저가 실행되기전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다

 

jsx코드가 어떻게 변환되는지 본다면?

function App() {
  return (
    <div>
      HELLO <b>react</b>
    </div>
  );
}

function App() {
  return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

만약 JSX코드를 작성하는게 아니여서 매번 React.createElement 함수를 사용해야한다면 매우 불편할거같다

 

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

root.render

ReactDOM 모듈을 불러와서 컴포넌트를 렌더링하는 역활을 한다

 

 

React.StrictMode 는 뭘까?

리액트 프로젝트에서 리액트의 레거시 기능들을 사용하지 못하게 하는 기능이다.

 

 

3. JSX의 문법

JSX를 사용하려면 몇가지의 규칙이필요하다

 

1. 감싸인 요소

import React from "react";

function App() {
  return (
    <h1>리액트 사용</h1>
    <h2>재미있다</h2>
  );
}

export default App;

이렇게 사용한다면 코드는 제대로 작동하지않는다.

부모요소하나에 감싸있어햐한다

 

import React from "react";

function App() {
  return (
    <div>
      <h1>리액트 사용</h1>
      <h2>재미있다</h2>
    </div>
  );
}

export default App;

왜 요소 여러개를 하나의 요소고 감싸주어야할까? 

Virtual DOM에서 컴포넌트 변화를 감지해낼때 효율적으로 비교할수있도록

컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야한다.

 

만약  <div> 요소를 사용하기 싫다면?

Fragment 라는 기능을 사용하면된다.

 

 

* fragment 사용 or <>생략으로 가능

import React, { Fragment } from "react";

function App() {
  return (
    <Fragment>
      <h1>리액트 사용</h1>
      <h2>재미있다</h2>
    </Fragment>
  );
}

export default App;


아니면

import React, { Fragment } from "react";

function App() {
  return (
    <>
      <h1>리액트 사용</h1>
      <h2>재미있다</h2>
    </>
  );
}

export default App;

 

2. 자바스크립트 표현

렌더링 기능뿐만아니라 자바스크립트 표현식을 쓸수있다

import React, { Fragment } from "react";

function App() {
  const name = "리액트";
  return (
    <>
      <h1>{name} 사용</h1>
      <h2>재미있다</h2>
    </>
  );
}

export default App;

 

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

조건에 따라 다른 내용을 렌더링해야할때는 { } 안에 조건부 연산자를 사용하면 된다.

import React, { Fragment } from "react";

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

export default App;

 

4. AND 연산자(&&)를 사용한 조건부 렌더링

개발하다보면 특정조건을 만족할때 , 만족하지 않을때 아예 아무것도 렌더링되지않아야하는 상황에 사용한다

import React, { Fragment } from "react";

function App() {
  const name = "리액트n";
  return <div>{name === "리액트" ? <h1>리액트입니다</h1> : null}</div>;
}

export default App;

 

5. undefined를 렌더링하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안된다

function App() {
  const name = undefined;
  return name;
}

export default App;

근데 오류가떠야한다는데 난 오류가안난다. 왜지?...ㅋㅋ

undefined일때 보여주고싶은 문구가있다면

 

function App() {
  const name = undefined;
  return <div>{name || "리액트"}</div>;
}

export default App;

이렇게 코드를 작성하면 된다.

 

 

6. 인라인 스타일링

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

따라서 background-color 라면 카멜표기법으로 작성해서 backgroundColor로 작성해야한다.

function App() {
  const name = "리액트";
  const style = {
    backgroundColor: "black",
    color: "aqua",
    fontSize: "48px",
    fontWeight: "bold",
    padding: 16,
  };
  return <div style={style}>{name}</div>;
}

export default App;

 

7. class 대신 className

JSX에서는  class가 아닌 className으로 설정해주어야한다

 

App.css파일

.react {
  background: aqua;
  color: black;
  font-size: 48px;
  font-weight: bold;
  padding: 16px;
}

 

 App.js 파일

import "./App.css";

function App() {
  const name = "리액트";
  return <div className="react">{name}</div>;
}

export default App;

 

8. 꼭 닫아야 하는 태그 and 주석

JSX에서는 코드를 닫지않으면 오류가 발생한다. 

또한 주석은 아래 형식처럼 {/*   */} 와 같은 형식으로 작성한다.

import "./App.css";

function App() {
  const name = "리액트";
  return (
    <>
      <div className="react">{name}</div>
      <input></input>
      {/* 주석은 이렇게 작성, 태그는꼭닫혀있어햐한다. */}
      <input />
    </>
  );
}

export default App;

 

여기까지 jsx와 규칙, 기본 cra 프로젝트의 소스를 보았다

다음에는 컴포넌트에 대해 알아보자