JSX

자바스크립트의 확장 문법. XML과 비숫하게 생겼다

• JSX로 작성한 코드는 브라우저에서 실해오디기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

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

// js 코드
function App() {
return React.createElement(“div“, null, “Hello “, React.createElement(“b“, null, “react“));
}

1. JSX의 장점

• 보기 쉽고 익숙하다 : 마치 html과 같은 문법으로 표현해 요소들을 만들어내기 좋다

• 더 높은 활용도 : html 태그외에도 JSX로 작성한 컴포넌트들을 마치 html 태그처럼 사용할 수 있다

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

2. JSX 문법

2-1. 감싸인 요소

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

• Virtual DOM에서 컴포넌트 변화를 감지할때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이뤄져야 한다.

// 컴파일 실패
function App() {
  return (
    <h1>리액트 안녕!</h1>
    <h2>잘 작동하니?</h2>
  )
}

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

2-2. Fragment

• 감싸기 위한 요소로 주로 Fragment를 사용한다

• Fragment는 DOM 마크업일 줄어들어 성능 향상에 도움이 될 수 있고, CSS 그리드나 플렉스 박스 사용시 <div>와 달리 문제가 없다

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

2-3. 자바스크립트 표현

• JSX 내부에서 {}로 자바스크립트 코드를 감싸 사용할 수 있다

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

2-4. 조건부 연산자

• JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수는 없다

• JSX 밖에서 if문을 사용하거나 {} 내부에 조건부 연산자(삼항 연산자)를 사용해야한다

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

• JSX는 false 렌더링 시 아무것도 렌더링하지 않기 때문에 && 연산자를 사용해서 조건에 맞지 않으면 아무것도 렌더하지 않도록 아래처럼 코드를 작성할 수 있다

function App() {
  const name = "뤼왝트";
  return <>{name === "리액트" && <h1>리액트입니다.</h1>}</>;
}

2-5. 인라인 스타일링

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

• 스타일들은 카멜 표기법으로 작성한다

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

2-6. className

• CSS 클래스는 className로 사용한다

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

2-7. 태그 닫기

• html에서 <input>과 같은 일부 태그들은 닫지 않고 사용한다

• 하지만 JSX에선 모든 태그를 닫아줘야한다

• 태그 사이에 내용이 들어가지 않는 경우 <input /> 형태처럼 self-closing 태그로 대체할 수 있다

2-8. 주석

• // 대신 {/* */}를 사용한다

• //를 사용하려면 태그 내에서 사용해야한다

---

자바스크립트 var vs let

var의 영역은 함수 단위, let의 영역은 블록 단위이다

// 동일 함수 내에서 var 변경 시 그대로 적용 
function myFunction() {
  var a = "hello";
  if(true) { 
    var a = "bye";
    console.log(a); // bye
  }
  console.log(a); // bye
}

// let은 블록 단위로 다른 블록에서 선언 시 다른 변수로 취급
// 단 let은 동일 블록 내에서 중복 선언 불가
function myFunction1() {
  let a = 1;
  if(true) {
     let a = 2; 

     console.log(a); // 2
  }
  console.log(a); // 1
}

• ES6부터 let이 생기면서 var을 사용하는 일은 없어졌다.