프로젝트 만들기
★ React 로 만드는 파일 : 소문자로 설정 + 파일 확장자명을 jsx 로 하자. ( 이렇게 해야, Vanilla JS 의 파일과 React 의 Component 들을 구분할수 있다. )
react-dom
▶ 라이브러리
▶ 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
-
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 내부에 비즈니스 로직을 작성할수 있다.
JSX 규칙
1. class 이름
<h1 className= 'title'>Hello!</h1>
JXS 내부에서 class 이름을 지정할때는 꼭 className 이라고 지정해야 한다.
2. event handler 등록
<h1 onClick = 'switch'>Hello!</h1>
- JSX 내부에서 이벤트 핸들러를 등록할때는 꼭 카멜케이스를 적용시켜야 한다.
- Reacte 에서는, React 나름대로 등록하려는 해당 이벤트를, 한 단계 더 감싸는 자신만의 Event 클래스를 사용한다.
- Javascript 에서의 Event 와 React 에서의 Event 는 다르다.
3. Javascript 코딩
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>4. JSX 내부에는 하나의 최상위 Component 만 return 할수 있다.
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> }4-1. .Fragment
- JSX 를 return ( 반환 ) 할때, JSX 내부에는 부모요소가 하나만 있어야하는데, 의미없는 grouping ( 그룹핑 ) 을 할때, 괜히 무분별한
<div>남발 사용대신
React 에서 제공하는 내장 프로퍼티 Fragment 를 사용하면 된다. - 투명 부모요소 라고 생각하면 된다.
// JSXfunction App(){ return <Raact.Fragment> <h1>Hello!</h1> <h1>Hi!</h1> </Raact.Fragment>}// HTML<div class ="root"> <h1>Hello!</h1> <h1>Hi!</h1></div>4-2. <></> : 빈태그
React 에서 제공하는 내장 프로퍼티 .Fragment 와 같은 역할을 하는, JSX 내부에서, 의미없이 노드들을 감싸는 최상위 투명 부모요소이다.
// JSXfunction App(){ return <> <h1>Hello!</h1> <h1>Hi!</h1> </>}// HTML<div class ="root"> <h1>Hello!</h1> <h1>Hi!</h1></div>5. return 키워드를 꼭 사용해서 반환
JSX 는, return 키워드를 꼭 사용해서 반환해줘야 한다.
