리액트 3. 번들러 ,웹팩,웹팩 로더 , JSX

번들러란?

 

• import 로 모듈을 불러왔을 때 모듈을 모두 합쳐서 하나의 파일을 생성해주는 것 읻가.

리액트에서 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되며,

프로젝트 생성 과정에서 node_modules디렉토리에 react모듈이 설치된다.

→ 그러면 import구문을 통해 리액트를 불러와서 사용할 수있는데 여기서 한가지 알아야 할 점이 있다.!!

모듈을 불러와서 사용하는 것은 원래 웹 브라우저에서는 없던 기능인데

이러한 기능을 브라우저에서도 사용하기 위해 번들러 개념이 탄생한 것이다.😈

번들러는 파일을 묶듯이 연결하는 것을 의미하며**, 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 환경인 Node.js가 지원해준다.** (참고로 Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있다.)

 

대표적인 번들러로는 웹팩, Parcel, browserify등의 도구들이 있다.

각 도구마다 특징이 다른데 → 리액트 프로젝트에서는 주로 웹팩을 사용한다.

웹팩을 사용함면 sgv file , css file 도 불러와서 사용할 수 있다.

• 파일들을 불러오는 것은 웹 팩의 로더 [loader] 기능을 담당한다.
• 웹팩의 로더가 (loader) 가 파일들을 불러오는 기능을 담당하고 있다.

css loader → for CSS file, file loader는 웹 폰트나 미디어 파일 등을 불러올 수 있게 해준다.

babel loader 는 자바스크립트을 불러왔을 떄 최신 자바스크립트 문법으로 작성된 카드를 es5 문법으로 변환 해 준다 ( 구버전 웹 브라우저와 호환을 학기 위해)ㅏ

원래는 웹팩의 로더는 직접 설치해야하는 데 리액트 프로젝트를 만들 떄 사용했던 create-react-app이 번거로운 작업을 모두 애가 대신해줌 그래서 따로 별도 설정을 할 필요가 없다.

편의성과 확장성이 다른 도구들보다 뛰어나기 때문이다. 번들러 도구를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐 하나의 파일을 생성해준다. 또한 최적화 과정에서는 여러개의 파일로 분리시켜준다.

 

리액트 프로젝트에는 다음과 같은 import코드들이 존재한다.

리액트 3가지 대표적인 특징

• jsx 문법
• Component 기반
• Virtual DOM

🙄 자 JSX 란?

📌자바스크립트의 확장문법 으로 xml 과 비슷한 생김새이다

📌이 코드는 실행 전 코드가 번들링 되는 과장에서 바벨을 통해 일반 자바스크립트 형태의 코드로 변환한다.

• 빌드 시 babel에 의해 자바스크립트로 변환한다.
• html 을 마치 js 처럼 편리하게 사용하기 위해 리액트 자바스크립트 확장문법이다!

import React from 'react'; 

JXS 규칙!

• 📌 감싸인 요소 →리액트는 컴포넌트가 여러개 요소가 있다면 ✔️ 반드시 부모 요소 하나로 감싸야 한다.
• 📌자바스크립트 표현
• 📌 if 문 대신 조건부 연산자 사용
• 📌undefined 를 렌더링 하지 않음
• 📌 Inline 스타일링 카멜케이스로 사용
• class 대신 className 사용
• 주석
• 속성은 따옴표로 감싼다 <속성 =””>
• 반드시 태그를 닫는다 <> <?>
• 모든 태그는 self closing 이 가능하다 </>
• 변수 값은 중괄호로 감싸서 표현 <변수 = {1,2,3}
• 반드시 div/ Fragment 태그로 감싸진 형태로 써야한다 . return <> …. </>

// did work const 컴포넌트 = () => ( <div></div> )
 // did work const 컴포넌트 = () => ( <> <div></div> <div></div> </> ) 
// did not work const 컴포넌트 = () => ( <div></div> <div></div> )
<> </> 감싸져야 한다.

const 컴포넌트 = () => {
  const handleOnClickded = () => {...};
  return (
    <div>안녕하세요</div>
    <span>안녕하세요</span>
    <h1>안녕하세요</h1>
    <button onClick={handleOnClickded}/>
    <button onClick={handleOnClickded}>안녕하세요</button>
    <img src="이미지주소" alt="대체텍스트"/>
  )
}

JSX 장점?

1. 보기 쉽고 익숙하다.
2. 더욱 높은 활용도 - html 태그를 사용할 수 있을 뿐만 아니라 컴포넌트도 사용가능하다.

이 문법은 감싸인 요소 !! 또 📌

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

하나의 DOM트리 구조로 이루어져 야 한다.

즉 컴포넌트가 여러 요소가 있다면 반드시 부모요소 하나로 감싸야 한다, 📌

<div> 요소를 사용하여 감싸고 싶지 않다면 Fragment 기능을 사용하면 된다. <> </> <Fragment></Fragment>

import { Fragment } from "react";

function App(){
  return (
    <Fragment>
    <h1>리액트 안녕!</h1>
    <h1>잘 작동 하니?</h1>
    </Fragment>
  )
}

export default App;
/아니면 /

function App(){
  return (
    <>
    <h1>리액트 안녕!</h1>
    <h1>잘 작동 하니?</h1>
    </>
  )
}

export default App;

📌자바스크립트 문법 → jsx 내부에서 자바스크립트 표현식을 사용하려면 코드를 {} 로 감싸면 된다.📌📌

function App(){
  const name = '리액트';
  return (
    <>
      <h1>{name} 안녕!</h1>
      <h1>잘 작동 하니?</h1>
    </>
  )
}

export default App;

📌 if 문 대신 조건부 연산자!!

jsx 내부의 자바스크립트 표현식에서 이프 문을 사용할 수 없다.

jsx 밖에서 if문 사용하여 사전에 값을 설정하거나 {} 안에 조건부 연산자를 사용하면 된다,

→ 자바스크립트 조건부 삼항 연산자 사용

(조건) ? value1 : value2

조건이 참일 경우 ✔️ value1 실행이 된다 But

조건이 거짓 일 경우 ❌ value 2 실행이 된다

let a= 10;
let b = 6; 
cosnt value = (a>b) ? apple : tokyo 
console.log(value);

📌IF문대신 조건부 삼항 연산자
function App() {
  const name = "리액트";
  return (
    <>
      {name === "리액트" ? <h1>리액트입니다!</h1> : <h1>리액트가 아닙니다.</h1>}
    </>
  );
}

{name ==="배고파" ? <h2>리액트</h2> : <h1>리액트아님</h2>}

export default App;

📌 AND 연산자  &&연산자 사용한 조건부 렌더링 코드

function App() {
  const name = "리액트";
  return <div>{name === "리액트" && <h1>리액트입니다!</h1>}</div>;
}
<>
{dlfma ==="Apple" && <h1>this is apple</h1>} 
2개이다

export default App;

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

첫 번쨰 피연산자가 트루라면 , 두번쨰 피연산자를 반환한다 첫 번쨰 피연산자가 거짓 이라면, 첫번쨰 첫 연산자를 반환한다.

개발하다 보면 특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아예 아무것도 렌더링하지 않아야 하는 상황이 올 수 있으며 이런 상황에서도 조건부 연산자를 통해 구현하면된다.

→ 리액트에서는 false 를 렘더링 할때 null 과 마찬가지로 아무 것도 나타내지 않는다. 그러나 0 의 경우 예외적으로 화면에 나타난다.

const numb = 0;

return numb && <div>blanbla</div>. → result 0

📌undefined 를 렌더링 하지 않기

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

어떤 값이 indefined일 수도 있다면, or( || )연산자를 사용해 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다. 예시는 다음과 같다.

→ OR || 연산자를 사용하여 오류 방지할 수 있다!!

→ OR 연산자란 ? 첫번쨰 참을 반환 , 모두 거짓일 경우 마지막 값을 반환

function App () {
const name = undefined;
return name;
}
export default App;
OR 연산자 사용해 오류 방지하기 !
function App() {
const name = undefined ;
return name || '값이 undifined입니다';
}

반면 JSX 내부에서 undefined를 렌더링하는 것은 상관없다. 괜찮다!

📌 Inline 스타일링

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

‘-’ 문자가 포함된 이름은 모두 카멜 표기법으로 바뀌어야 한다!

예시 ) background-color → backgroundClolor

그리고 fontWeigjt 카멜로 표기해야한다.!

function App () {
const name = 'react';
const style ={
 backgroundColor: 'black',
 fontSize: '49px';,
 fontWeight: 'bold',
 paddimg: 16
};
return <div style ={style}> {name} </div>
export default App;

📌 class 대신 className 사용해야 한다!

일반 html에서 css클래스를 사용할 때는 class라는 속성을 통해 설정했다.

JSX는 class가 아닌 className을 통해 설정한다.

📌 주석 {/주석이다/}

import "./App.css";

function App() {
  const name = "리액트";
  return (
    <>
      {/*주석은이렇게!!*/}
      <div
        className="react" //시작 태그를 여러줄로 작성하면 여기에 주석 작성가능
      >
        {name}
      </div>
      //하지만 이런주석이나
      /*이런주석은 페이지에 그대로 나타남*/
    </>
  );
}

export default App;