★ React 로 만드는 파일 : 소문자로 설정 + 파일 확장자명을 jsx 로 하자. ( 이렇게 해야, Vanilla JS 의 파일과 React 의 Component 들을 구분할수 있다. )
▶ 라이브러리
▶ React 같은 라이브러리들은 Babel 을 통해서 Vanilla JS 로 변환이 되는데, 이렇게 자바스크립트로 변환된, React 로 만들었던 제일 최상위에 있는
Component 들을, HTML의 Elememt 와 연결하는 역할을 하는 것.
import ReactDOM from 'react-dom'
| "react-dom" 이라는 라이브러리에서 ReactDOM 이라는 Class 함수 컴포넌트를 import 해와라."
// index.js
import ReactDOM from 'react-dom'; // | 'react-dom' 이라는 라이브러리에서 ReactDOM 이라는 내장 Class 함수를 import 해와라.
ReactDOM.render(
<App />
document.getElementById('root')
); // | 1. 'react-dom'이라는 라이브러리에서 가져온 ReactDOM이라는 내장Class 함수의, 뷰포트에 그리는 역할을 하는 render 내장 메서드를 사용해서,
// | 뷰포트에 그려라.
// | 2. 어떤것을? render 내장 메서드 내부에 개발자가 JSX형식으로 구현한 내용을.
// | ( 내용 : app.jsx 파일에 구현해놓은 <App /> = App 이라는 이름의 일반함수 )
// | 3. 어디에? HTML의 'root' 라는 것을 id 로 가지고 있는 HTML Real DOM 요소안에.
// app.jsx
function App() {
return <h1>Hello :)</h1>
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>
document.getElementById('root')
);
// <React.StrictMode> : 엄격모드를 사용하면, 콘솔에서 바로 에러메시지 표기. 이대로 배포되어도, 배포버전에는 엄격모드가 활성화 되지 않기 깨문에 사용자에게는 콘솔에서 에러메시지가 보이지 않게 된다.
JSX 가 도입되기 이전엔, Reaact 의 내장메서드인 createElemet( ) 를 사용해서, HTML 의 element 와, class 의 이름 과, Style, 그리고 textContent 를 지정해서 HTMl 과 연결했었다. React.createElement('h1', {className:'title'}, 'Hello!')
────>> 이렇게 번거롭게 일일히 모든 Element 를 만들 던 것이, JSX 의 도입 덕분으로 쉽게 HTML DOM 을 구조화 시킬수 있게 되었다.
<h1 class=title>Hello!</h1>
// JSX 도입 전
function App(){
return React.createElement('h1', {className:'title'}, 'Hello!')
}
// JSx 도입 후
function App(){
return <h1 className=title>Hello!</h1>
}
후에 JSX 코드들을 Bable 이 JS 로 변환시켜준다. 즉, JSX 는 JS 코드이기 때문에, JSX 내부에서 자바스크립트 코드를 작성하려면 { }
중괄호를 JSX 내부에 비즈니스 로직을 작성할수 있다.
<h1 className= 'title'>Hello!</h1>
JXS 내부에서 class 이름을 지정할때는 꼭 className
이라고 지정해야 한다.
<h1 onClick = 'switch'>Hello!</h1>
JSX 는 JS 코드이기 때문에, JSX 내부에서 자바스크립트 코드를 작성하려면 { }
중괄호를 JSX 내부에 사용해야 한다.
function App(){
const name = '강주현'
return <h1 className=title>Hello! {name}</h1> // <- name 이라는 변수를 JSX 내부에서 사용하려면 템플릿 리터럴이 아니라,
// 그냥 중괄호를 사용해야 한다.
}
function App(){
const name = '강주현'
return
<>
<h1>Hello!</h1>
{ name && <h1>Hi! {name}</h1> } // <- name 이라는 변수에 값이 있으면 <h1>Hi! {name}</h1> 을 반환해라
</>
}
// JSX
function App(){
const name = '강주현'
return
<>
<h1>Hello!</h1>
{ name && <h1>Hi! {name}</h1> } // <- name 이라는 변수에 값이 있으면 <h1>Hi! {name}</h1> 을 반환해라
{['이준호', '황찬성'].map(name => <h1>{name}</h1>)}
</>
}
// HTML
<div id='root'>
<h1>Hello!</h1>
<h1>Hi! 강주현</h1>
<h1>이준호</h1>
<h1>황찬성</h1>
</div>
JSX 는, 다수의 태그들을 return ( 반환 ) 할수 없기 때문에, JSX 를 return( 반환 ) 할때, 형제노드를 쓸수 없다.
즉, JSX 내부에서 return ( 반환 ) 할때는 한가지의 태그로 감싸줘서, 부모요소가 하나만 있게 해야 한다.
// SyntaxError
function App(){
const name = '강주현'
return <h1 className=title>Hello! {name}</h1><h2>Hi!</h2>
}// Adjacent JSX elements must be wrapped in an enclosing tag.
function App(){ const name = '강주현' return <div> <h1 className=title>Hello! {name}</h1> </div> }
.Fragment
<div>
남발 사용대신 // JSXfunction App(){ return <Raact.Fragment> <h1>Hello!</h1> <h1>Hi!</h1> </Raact.Fragment>}// HTML<div class ="root"> <h1>Hello!</h1> <h1>Hi!</h1></div>
<></> : 빈태그
React 에서 제공하는 내장 프로퍼티 .Fragment 와 같은 역할을 하는, JSX 내부에서, 의미없이 노드들을 감싸는 최상위 투명 부모요소이다.
// JSXfunction App(){ return <> <h1>Hello!</h1> <h1>Hi!</h1> </>}// HTML<div class ="root"> <h1>Hello!</h1> <h1>Hi!</h1></div>
JSX 는, return 키워드를 꼭 사용해서 반환해줘야 한다.