ReactJS - JSX

JSX

JSX는 JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아닙니다
자바스크립트를 확장한 문법으로 자바스크립트 객체라고 볼 수 있습니다
JSX를 사용함으로써 구조와 기능을 한눈에 확인 할 수 있습니다
JSX로 작성된 코드는 Babel을 통해 JavaScript로 컴파일 됩니다

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

function App() {
	return(
    	<div className="App">
        	<img src={logo} alt="logo">
        </div>
    )
	
}

export default App;

위에 작성된 코드는 아래와 같이 변환 됩니다

function App() {
	return React.createElement(
      'div', 
      {
       className : 'App'
      }, 
      React.createElement('img',{
		 src : logo,
         alt : 'logo'
      })
   )
}

imprt 혹은 require 로 파일을 불러오면 번들러도구를 사용하여 하나의 파일로 합쳐서 생성해 줍니다

create-react-app 을 사용하면 별도의 웹팩 설정을 생략할 수 있습니다

번들러

• Webpack
  • css-loader - CSS파일 로드
  • file-loader - 웹폰트, 미디어파일 로드
  • babel-loader : 최신문법으로 작성된 코드를 ES5 문법으로 작성된 코드로 변환
• Parcel
• browserify

ReactDOM.render()

페이지에 랜더링하는 역할을 하며, react-dom 모듈에서 불러와서 사용 가능합니다
첫번재 파라미터 에는 JSX형태의 엘리먼트를 넣고, 두번째 파라미터에는 document의 내보요소를 설정합니다

import ReactDOM from 'react-dom';

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

React.StrictMode

리액트 프로젝트의 레거시 기능들을 사용하지 못하게 하는 기능입니다

JSX 문법

감싸인 요소

컴포넌트에 여러개의 요소가 존재한다면 하나의 부모 요소에 의하여 감싸져 있어야 합니다

// parsing error 발생

function App() {
	return (
    	<p>안녕하세요</p>
        <p>리액트 시작하기</p>
    )
}

• 하나의 부모 요소로 감싸주기

function App() {
	return (
      	<div>
          <p>안녕하세요</p>
          <p>리액트 시작하기</p>
        </div>
    )
}

• Fragment 사용하기 (v.16 이상)

function App() {
	return (
      	<Fragment>
          <p>안녕하세요</p>
          <p>리액트 시작하기</p>
        </Fragment>
    )
}

// 생략 기호 사용 가능
function App() {
	return (
      	<>
          <p>안녕하세요</p>
          <p>리액트 시작하기</p>
        </>
    )
}

변수 사용

function App() {
     const name = "리아"
	return (
      	<>
          <p>안녕하세요 {name}!</p>
          <p>리액트 시작하기</p>
        </>
    )
}

삼항 연산자

function App() {
     const name = "리액트"
	return (
      	<>
         {
          name === '리액트' ? <p>리액트 시작하기<p> : <p>다른 언어 공부하기</p> 
         }
        </>
    )
}

&& 연산자

function App() {
     const name = "리액트"
	return (
      	<>
         {name === '리액트' && <p>리액트 시작하기 </p>}
        </>
    )
}

undefined

function App() {
     const name = undefined
	return (
      	<>
         { name || '값이 undefined 입니다'}
        </>
    )
}

inline 스타일링

인라인 스타일을 작성할때는 camelCase 기법으로 작성해야합니다

 function App() {
     const name = "리액트"
     const style = {
     	color : 'white',
        backgroundColor : 'black'
     }
	return (
      	<>
         <div style={style}>{name}</div>
        </>
    )
}

// 직접 태그에 작성 가능 (리랜더링 이슈 발생)

 function App() {
     const name = "리액트"
	return (
      	<>
         <div style={{
     		color : 'white',
        	backgroundColor : 'black'
     	}}>{name}</div>
        </>
    )
}

className

리액트에서는 class 속성을 className 으로 작성해야합니다

function App() {
     const name = "리아"
	return (
      	<>
          <p className="txt-red">안녕하세요 {name}!</p>
        </>
    )
}

closing tag

리액트에서는 closing tag 는 필수 입니다

// parsing error 발생

function App() {
     const name = "리아"
	return (
      	<>
          <input value={name}>
        </>
    )
}

function App() {
     const name = "리아"
	return (
      	<>
          <input value={name} />
        </>
    )
}

주석

리액트 JSX문법 내에서 주석은 {/* */} 안에 작성해야합니다

function App() {
    const name = "리아"
	return (
      	<>
          {/* 주석은 이렇게 작성해야 합니다  */}
          <input value={name} />
        </>
    )
}