2장 JSX

import logo from './logo.svg';
import './App.css';

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

export default App;

import 해서 다른 모듈을 불러오는데 브라우저에서 이를 기능하게 하기 위해서 번들러를 사용해야함. 번들러가 여러 파일들을 묶어서 연결해줌.
Attachments/Picture/Untitled 6.png

번들러는 여러종류가 있는데 웹팩을 많이씀.
17년도부터 브라우저에서도 import 구문을 지원하는데, JS불러오는 용도라서 프로젝트 번들링하고 조금 다르다는데 잘은 모르겠음.

JSX

자바스크립트의 확장 문법으로 코드가 번들링 되는 과정에서 바벨이 일반 자바스크립트 형태의 코드로 변환시켜줌.

function App(){
	return (
		<div>
			Hello <b>react</b>
		</div>
	);
}
function App(){
	return React.createElemnt("div",null,"Hello ",React.createElement("b", null, "react"));
}

위 코드가 아래 코드로 변환됨.

JSX 문법

감싸인 요소

컴포넌트에 여러 요소가 있으면 부모 요소 하나로 감싸야함
→ 컴포넌트 내부는 하나의 DOM 트리구조로 이루어져야 하기 때문.
div 사용하고 싶지 않으면 Framgent 컴포넌트로 묶어주면 됨.

import React, { Fragment } from 'react';
 
function App() {
  return (
    <Fragment>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </Fragment>
  );
}
 
export default App;

자바스크립트 표현

{ } 로 감싸서 자바스크립트 표현식 쓸 수 있음.

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

If 문 대신 조건부 연산자

JSX 내부에서 if 문 사용할 수 없음.
그럼 어케함?

  1. JSX 밖에서 if문 사용해서 사전에 값을 설정하거나,
  2. { } 안에서 조건부 연산자 사용.
import React from 'react';
 
function App() {
  const name = '리액트';
  return (
    <div>
      {name === '리액트' ? (
        <h1>리액트입니다.</h1>
      ) : (
        <h2>리액트가 아닙니다.</h2>
      )}
    </div>
  );
}
 
export default App;

➕ 단축평가 이용해서도 조건부 렌더링 가능.
⚠️ falsy 값은 그냥 화면에 나타나버림

undefined 렌더링하지 않기

undfeined만 반환해서 렌더링하면 오류 발생.
|| 이용해서 단축평가이용해서 예방

인라인 스타일링

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;

class 대신 className

태그 class 지정할 때 class 대신 className 사용

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

꼭 닫아야하는 태그

태그를 꼭 닫아줘야함.

주석

{/* ~~~ */} 형식으로 사용