[코드숨] 리액트 13기 -1강/JSX(Babel)

DSL (Domain Specific Language)

도메인 특화 언어(Domain-specific language)는 특정한 도메인을 적용하는데 특화된 컴퓨터 언어이다.

 

지난번 강의는 자바스크립트 특화된 언어로 작성한것

 

 

BABEL 바벨

바벨은 ECMAScript2015 이상의 코드를 적당한 하위 버전으로 바꾸는 것이 주된 역할이다.

 

https://babeljs.io/

Babel · The compiler for next generation JavaScript

 

 

왼쪽 주석에 설정대로 오른쪽 문구가 바뀜

 

 

<바벨 설치>

 

1.

 npm i -D babel-loader  터미널에 작성

webpack 에서 바벨을 사용할 수 있도록 도와주는 것

 

2. webpack.config.js 파일 설정

module.exports={
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.jsx?$/, //  /\.js?$/ or /\.js|jsx?$/  도 가능
        exclude: /node_modules/,  //node_modules는 제외한다. 나머지는 jsx를 babel-loader로 적용한다.
        use: 'babel-loader', //babel-loader를 적용할것이다
      },
    ],
  },
};

 

3.

npm i -D @babel/core

 

이후 npm start 를 하면 바벨을 이용해서 index.js가 처리가 된다.

 

4.

babel.config.js 파일 생성 후 안에 코드 넣기

module.exports = {
  presets: [
    [
      '@babel/preset-env', //기본적인것들
      {
        targets: {
          node: 'current', //현재 노드버전에 맞는 것들로 변환
        },
      },
    ],
    '@babel/preset-react', //리액트에써 쓰이는 것들
  ],
};

 

5.

npm i -D @babel/preset-env @babel/preset-react

 

> npm start

 

6. index.js 에서 props 를 추가

 

 

id나 className 등의 props를 참고하기 위해

 

 

오류1

jsx not allowed in files with extension '.js'

 

해결1

.eslintrc.js 파일 안에 rules 부분을 아래와 같이 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],  를 추가해줌

rules: {

    'linebreak-style': 0,

    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],

  },

https://velog.io/@cheej10/eslint-%EC%85%8B%ED%8C%85-%EA%B4%80%EB%A0%A8-%EC%97%90%EB%9F%AC

 

오류2 

vs code에선 오류가 안보이나 터미널 오류 & 화면 미출력

 

 

해결2

설정이 잘못된 줄 알고 파일 내에 설정들을 수정해 보았으나 계속해서 화면 미출력됨

다시 살펴보니 파일이 외부로 나가있었음. 꼭 파일이 폴더 내에 정확한 경로에 위치해 있는지 확인하기.

 

---

instanceof

instanceof 키워드는 A instanceof B 의 형식으로 사용하며 A가 B의 인스턴스가 맞는지를 판단하여 true / false를 반환하는 비교연산자

 

Object.keys, values, entries

• Object.keys(obj) – 객체의 키만 담은 배열을 반환합니다.
• Object.values(obj) – 객체의 값만 담은 배열을 반환합니다.
• Object.entries(obj) – [키, 값] 쌍을 담은 배열을 반환합니다.

let user = { name: "John", age: 30 };

• Object.keys(user) = ["name", "age"]
• Object.values(user) = ["John", 30]
• Object.entries(user) = [ ["name","John"], ["age",30] ]

 

 

오류 main.js:287 Uncaught TypeError: Cannot convert undefined or null to object

null인경우를 처리안해줘서

>

props는 id,class같은 속성

 

>처리를 해줘야 아래와 같이 id="hello"가 들어가짐

 

크롬검사

 

 

▼아래와 같은 출력 오류

<p>
    {[1, 2, 3].map((i) => (
      <p>{i}</p>
    ))}
</p>

 

출력오류

해결은 flat()으로 

>

flat()

배열안에 배열을 다 꺼내줌

[1,[2,3]] =>[1,2,3] 으로 바꿔줌

 

 

▼ 둘은 동일하다

<button type="button" onClick={handleClick}>
<button type="button" onClick={(e) => handleClick(e)}>

 

▼ 틀린예시

<button type="button" onClick={handleClick()}>   =>X(안에서 계속 실행되서 안됨)

 

---

*참고

 

▼ 둘은 다르다 (ㄱ, ㄴ)

 

ㄱ.

<button type="button" onClick={handleClick}>

function handleClick(e): void { 

}

(e) => 매개변수에 event가 들어가서 실행

 

ㄴ.

<button type="button" onClick={(e) => handleClick()}>

 function handleClick() {
    
  }

e를 넘겨준걸 함수handleClick(){} 에서 이렇게 받았기 때문에 위에 함수처럼 매개변수에 e 가 들어가지 않은 상태이다.

 

---

동일하려면 이렇게

<button type="button" onClick={(e) => handleClick(e)}>

---

 

src>index.js

/* @jsx createElement */

function createElement(tagName, props, ...children) {
  const element = document.createElement(tagName);

  Object.entries(props || {}).forEach(([key, value]) => {
    element[key.toLowerCase()] = value; // .toLowerCase():props에 있는 key,value는 소문자여야하기때문
  });

  children.flat().forEach((child) => {
    if (child instanceof Node) {
      element.appendChild(child);
      return;
    }
    element.appendChild(document.createTextNode(child));
  });

  return element;
}

//
let count = 0;

function handleClick() {
  count += 1;
  render();
}

function handleClickNumber(value) {
  count = value;
  render();
}

function render() {
  const element = (
    <div id="hello" className="greeting">
      <p>Hello, world!</p>
      <p>
        <button type="button" onClick={() => handleClick()}>
          Click me!
          (
          {count}
          )
        </button>
      </p>
      <p>
        {[1, 2, 3].map((i) => (
          <button type="button" onClick={() => handleClickNumber(i)}>
            {i}
          </button>
        ))}
      </p>
    </div>
  );

  document.getElementById('app').textContent = '';// 안의 내용을 전부 지우고(textContent: <script>와 <style> 요소를 포함한 모든 요소의 콘텐츠를 가져옴)
  document.getElementById('app').appendChild(element);// 새로추가해줌
}// count가 변한 걸 화면에 출력해주기 위해 render로 감싸줌

render();

/* document.getElementById('app').appendChild(
  createElement(
    'div',
    createElement(
      'p',
      ...[1, 2, 3].map((i) => (
        document.createTextNode(`Hello! ${i} | `)
      )),

    ),
    createElement(
      'p',
      document.createTextNode('Hi'),
    ),
  ),
);
 */

 

 

 

---

강의 참고 자료

 

https://jeonghwan-kim.github.io/series/2019/12/22/frontend-dev-env-babel.html

프론트엔드 개발환경의 이해: Babel

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

https://ko.javascript.info/destructuring-assignment

구조 분해 할당

https://ko.javascript.info/object

객체

https://ko.javascript.info/keys-values-entries

Object.keys, values, entries

https://ko.javascript.info/logical-operators#ref-327

논리 연산자