[React] 기초 개념

JSX란? 

- React 컴포넌트 상에서, Template을 정의할 때 사용하는 문법

- HTML 같이 생겼으나, XML 형태로 작성되며, 실제로는 JavaScript이다.

- Babel이 JSX를 Javascript로 내부적으로 변환해준다.

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

const App = () => {
	return (
    	<div>
        	<Hello />
            <Hello />
        </div>
    );
}

- JSX 문법상 Self Closing 태그이든지, 쌍으로된 태그이든지 항상 닫는 태그를 사용하여야 한다.

 

컴포넌트 내 Logic 데이터를 템플릿에 반영하는 문법 : { 변수명 }

(JSX 안에 자바스크립트 값 사용하는 방법)

- JSX 상에서 { 변수명 } 형태로 넣어준다. 

...
function App() {
  const name = 'john';
  ...
  return (
    ...
    <div attr={name} />  // ★
    ...
  );
}
...

 

JSX 문법 상에서 Style과 Class 적용하기

- JSX 상에서, style과 class를 설정하는 것은 HTML과 상이하다

1. 인라인 style 속성을 적용할 경우[Style]

-> const 객체 = { camelCase 스타일 속성 : 속성값, ... } 형태로 선언후, <div style={객체} /> 형식으로 사용해주어야 한다.

-> 인라인 스타일의 경우, 컴포넌트내 객체 형태로 작성해야 한다.

- 기존 -로 구분되는 스타일 속성이름을 camelCase 형태로 변환해주어야 한다.

 (ex) background-color -> backgroundColor

 

2. class를 적용할 경우[Class]

-> 기존 HTML 태그와 같이 class="클래스명" 문법으로 사용되지 않는다.

-> <div className="클래스명" /> 형식으로 사용된다.

import React from 'react';
import './App.css'; 	 // css 파일 내부에 기존 문법에 맞게, class 선언

function App() {
	const name = 'react';
    // react 컴포넌트의 style 속성은 camelCase 형식으로 쓰입니다.
    const style = {
    	backgroundColor: 'black',
        color: 'aqua',
        fontSize: 25,    // 기본 단위는 px
        padding: '1rem'  // rem 이외에 다른 단위 사용가능
    };
    
    return (
    	<div>
            <div style={style}> { name } </div> 		  // inline style 적용법1
			<div style={ {backgroundColor : 'black'} } /> // inline style 적용법2
            <div className="클래스명" />        // class 적용
        </div>
    );
}

export default App;

JSX 상에서 Fragment란?

- 단순히 가ㅓㅁ싸기 용으로 태그를 이용해야 할 때 사용

- 형태 : <> ... </>

 

JSX 상에서의 주석

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

...
return (
	<>
    	{/* 주석은 화면에 보이지 않습니다 */}
        /* 중괄호로 감싸지 않으면 화면에 보입니다.(HTML과 다름) */
        <Hello
        	// 열리는 태그 내부에서는 이렇게 주석을 작성할 수 있습니다.
        />
        
    </>
);
...

 

JS 공통 개념

- Babel이란?

-> Javascript의 문법을 확장해주는 도구

-> 아직 지원되지 않는 최신 ES 문법이나 편의상 사용되는 자바스크립트 문법을 정식 자바스크립트로 변환해줌

-> 구형 브라우저 같은 환경에서도 정상적으로 실행할 수 있게 해줌