리액트

 

1. 리액트 코드 분석

    1) import React from 'react';

        a. 리액트를 불러와서 사용할 수 있게 해 줌

        b. 리액트 프로젝트 생성 시 node_modules라는 디렉터리가 생성

        c. 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈 설치

        d. import 구문을 통해 리액트를 불러와서 사용 가능

        => 모듈 불러와서 사용하는 것(번들러 bundler)은 원래 브라우저에는 없던 기능.

       

2. 번들러

    1) 종류

        a. 웹팩(주로 사용), Parcel, browserify 

        b. 웹팩을 주로 사용, 편의성과 확정성이 다른 도구들보다 뛰어남

    2) 특징

 

        a. import(or require)로 모듈 불러왔을 때, 불러온 모듈을 모듀 합쳐서 하나의 파일을 생성해줌

        b. 최적화 과정에서 여러 개의 파일로 분리될 수도 있음

        c. 웹팩을 사용하면 SVG, CSS파일도 불러와서 사용할 수 있음

 

3. 로더

    1) 특징

        a. 파일들을 불러오는 것

    2) 종류

        a. css-loader: CSS 파일 불러오기

        b. file-loader: 웹 폰트나 미디어 파일 등 불러오기

        c. babel-loader: 자바스크립트 파일들 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를

           사용하여 ES5 문법으로 변환 

 

4. 코드 분석

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

    1) 분석

        a. function 키워드: App이라는 컴포넌트를 만들어 줌(함수형 컴포넌트)

        b. HTML을 작성한 것 같은데 이건 HTML이 아닌 JSX

 

5. JSX

    1) 특징

        a. 확장 문법. XML과 매우 비슷하게 생김

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

// JSX 코드
function App() {
  return (
    <div>
      Hello <b>react</b>
    </div>
  );
}


// 변환
function App() {
return React.createElement(“div“, null, “Hello “, React.createElement(“b“, null, “react“));
}

    2) 장점

        a. 보기 쉽고 익숙함: 가독성이 높고 작성하기도 쉬움

        b. 높은 활용도: HTML 태그를 사용할 수 있을 뿐 아니라, 컴포넌트들도 JSX 안에서 작성 가능

    3)  ReactDOM.render

        a. 컴포넌트를 페이지에 렌더링 하는 역할

        b. react-dom 모듈을 불러와 사용 가능

    3)  JSK 문법

        a. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감사야 한다.

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

                 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문

        b. react-dom 모듈을 불러와 사용 가능

        c. 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { }로 감싸면 됩

        d. if 사용 불가. 

            -> 조건에 따라 다른 내용 렌더링 할 때, if문 사용해 사전에 값 설정하거나, {}에 조건부 연산자 사용

import React from ‘react‘;


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

        e. AND 연산자(&&) 사용

           -> 특정 조건을 만족할 때 내용을 보여 주고, 만족하지 않을 때 아예 아무것도 렌더링 하지 않는 상황에서 사용

        f. undefined 렌더링하지 않기

           -> undefined만 반환하여 렌더링 하는 상황을 만들면 안 됨

        g. 인라인 스타일링

            -> DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어줘야 함

import React from ‘react‘;


function App() {
  const name = ‘리액트‘;
  const style = {
    // background-color는 backgroundColor와 같이 -가 사라지고 카멜 표기법으로 작성됩니다.
    backgroundColor: ‘black‘,
    color: ‘aqua‘,
    fontSize: ‘48px‘, // font-size -> fontSize
    fontWeight: ‘bold‘, // font-weight -> fontWeight
    padding: 16 // 단위를 생략하면 px로 지정됩니다.
  };
  return <div style={style}>{name} </div>;
}



export default App;

        h. class 대신 className

import React from 'react';
import './App.css';
 
function App() {
  const name = '리액트';
  return <div className="react">{name}</div>;
}
 
export default App;