minjgziii

📌 JSX란?

- 자바스크립트의 확장 문법

- 리액트에서 생김새를 정의할 때, 사용하는 문법

- HTML 같이 생겼지만 실제로는 JavaScript

리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면,

Babel이 JSX를 JavaScript로 변환해 준다.

(*Babel은 자바스크립트의 문법을 확장해 주는 도구)

JSX가 JavaScript로 제대로 변환이 되려면 규칙을 잘 지켜야 한다.

📌 JSX의 기본 규칙

1. 태그는 꼭 닫아야 한다.

HTML에서는 input 또는 br 태그를 사용할 때 닫지 않고 사용하기도 하지만,

리액트에서는 그렇게 하면 안된다.

태그와 태그 사이에 내용이 들어가지 않을 땐, 다음과 같이 Self Closing 태그를 사용해야 한다.

<Hello />

2. 태그는 꼭 감싸져야 한다.

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello />
    <div>Hello World!</div>
  );
}

export default App;

➝ 오류 발생

따라서 다음과 같이 하나의 태그로 감싸주어야 한다.

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
      <div>Hello World!</div>
    </div>
  );
}

export default App;

✋ 잠깐!  그런데, div 요소를 사용하고 싶지 않다면?

이럴 땐, Fragment라는 기능을 사용하면 된다.

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <>
      <Hello />
      <div>Hello World!</div>
    </>
  );
}

export default App;

이렇게 <> 태그를 작성할 때 이름 없이 작성을 하면 Fragment가 만들어지는데,

이 친구는 단순히 감싸기 용으로 태그를 이용할 때 사용하면 되고, 브라우저 상에서 별도로 나타지 않는다.

Fragment의 형태는 <>  </> 이렇다.

3. JSX 내부에서 Javascript 값을 사용할 때는 {} 로 감싸서

import React from 'react';
import Hello from './Hello';

function App() {
  const word = 'hello';
  return (
    <>
      <Hello />
      <div>{word}</div>
    </>
  );
}

export default App;

4. 인라인 스타일의 경우 style의 네이밍은 camelCase 형태로

backgroundColor 와 같이 camelCase 형태로 작성해야 한다.

여기서 camelCase란?

- 단어를 표기할 때 첫 문자는 소문자로 시작해 띄어쓰기 대신 대문자로 단어를 구분(합성어)

ex) phoneNumber, createAt, updatedAt

5. CSS 파일을 불러올 때는 className=

CSS class 설정할 때는

class=                          (x)

className=                (o)

6. JSX에서 주석은 {/* 요렇게~ */} 작성한다.

import React from 'react';
import Hello from './Hello';
import './App.css';

function App() {
  const word = 'hello';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      {/* 주석 */}
      <Hello 
      />
      <div style={style}>{word}</div>
    </>
  );
}

export default App;

{중괄호로 감싸지 않으면 화면에 나타나기 때문에 꼭 { } 로 감싸기!

참고 사이트

📌 IntelliJ에서 React 프로젝트 세팅하는 과정 📌

1️⃣  Node.js 설치

- LTS 버전으로 설치하는 것이 안정적이라고 한다!

https://nodejs.org/ko/download/

2️⃣  react project 설치

프로젝트 폴더를 생성할 위치에서 cmd를 키고

  npx create-react-app myapp                           

을 입력한다.

그리고 나서, IntelliJ에서 생성한 프로젝트를 Open 한다.

3️⃣  로컬 서버에 띄우기

그리고 나서,

  npm start                              

를 입력하면 된다고 했는데.... 

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\project_intellij/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\project_intellij\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

이런 오류가 떴다.

🧐 해결 방법

생성된 폴더로 이동한 후에,

  npm start                              

를 입력해야한다^ - ^

멍충멍충,,,