2. JSX
2.1 코드 이해하기
webpack
번들러라고 부르며 이걸 사용 시 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성한다.
babel
src/index.js
에서 파일을 다 불러와 번들링 할 예정
- ES6 → ES5 문법으로 변환
- 구버전 웹 브라우저와 호환하기 위해서
component
function App(){
return (
<div>
<h1>안녕</h1>
</div>
)}
- 이 코드는 App 이라는 컴포넌트를 만들어 준다 .
- function() 을 사용해서 함수 컴포넌트라고 부른다
- return 에는 HTML같은 코드가 있는데 , JSX라고 부른다
2.2 JSX
- JS의 확장 문법이며, XML와 유사하게 생겼다.
- 이런 형식으로 작성된 코드는 브라우저에서 실행되기 전에 바벨을 사용하여 JS 형태의 코드로 변환
- 자바스크립트 문법이라고 할 수 없다.
장점
- 보기 쉽다
- 높은 활용도
-
HTML 태그를 사용할 수 있다.
-
앞으로 만들 컴포넌트도 JSX 안에서 작성 가능
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'));
<App/>
이런식으로 사용 가능
ReactDOM.render(a,b )?
- 컴포넌트를 페이지에 렌더링하는 역할
- 첫 값(a)는 페이지에 렌더링 할 내용
- 두번째 값: 해당 JSX를 렌더링할 document 내부 요소 설정
- ⇒ id 가 root인 요소 안에 렌더링을 해달라
JSX 문법
1. return 안의 내용 요소 여러 개를 하나의 요소로 감싸 줘야한다.
- Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교하도록 하나의 DOM 트리로 구성되어야 한다.
fuction App(){
return (
<div>
<h1>하이</h1>
<h2>헬로우</h2>
</div>
);
}
export default App;
- 최신 기술 Fragment (div 대신 사용)
<>
<h1>하이</h1>
<h2>헬로우</h2>
</>
2. 자바스크립트 표현 가능 { }
function App(){
const name="heyhey";
return(
<>
<h1>**{name}**</h1>
</>
)
}
3. If 문 대신 조건부 연산자
function App() {
const name="heyhey"
return (
<div className="App">
**{name==='heyhey' ? (<h1>천재</h1>) : (<h1>바보</h1>)}**
</div>
);
}
4. AND 연산자(&&)를 사용한 조건부 렌더링
-
HTML 태그를 사용할 수 있다.
-
앞으로 만들 컴포넌트도 JSX 안에서 작성 가능
ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'));
<App/>
이런식으로 사용 가능ReactDOM.render(a,b )?
- 컴포넌트를 페이지에 렌더링하는 역할
- 첫 값(a)는 페이지에 렌더링 할 내용
- 두번째 값: 해당 JSX를 렌더링할 document 내부 요소 설정
- ⇒ id 가 root인 요소 안에 렌더링을 해달라
1. return 안의 내용 요소 여러 개를 하나의 요소로 감싸 줘야한다.
- Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교하도록 하나의 DOM 트리로 구성되어야 한다.
fuction App(){
return (
<div>
<h1>하이</h1>
<h2>헬로우</h2>
</div>
);
}
export default App;
- 최신 기술 Fragment (div 대신 사용)
<>
<h1>하이</h1>
<h2>헬로우</h2>
</>
2. 자바스크립트 표현 가능 { }
function App(){
const name="heyhey";
return(
<>
<h1>**{name}**</h1>
</>
)
}
3. If 문 대신 조건부 연산자
function App() {
const name="heyhey"
return (
<div className="App">
**{name==='heyhey' ? (<h1>천재</h1>) : (<h1>바보</h1>)}**
</div>
);
}
4. AND 연산자(&&)를 사용한 조건부 렌더링
{name==='heyhey'&& <h1>천재</h1>}
맞으면 보여주고 아니면 아무것도 나타나지 않는다.
5. undefined 해결
function App() {
const name= undefined
return (
<div className="App">
<h1>{name||'없음'}</h1>
</div>
);
}
{name||'없음'}
OR(||) 연산자를 사용해 해당 값이 undefined 일때 사용할 값 지정 → 오류방지
6. 인라인 스타일링
스타일 적용할 때는 문자열 형태가 아닌 객체로 넣어줘야한다. → camelCase로 작성해야 한다.
font-size → fontSize
background-color→backgroundColor
<div
style={{
backgroundColor:'black',
color:'aqua',
fontSize:'48px'
}}
7. class 대신 className
<div className="heyhey">
class 가 아니라 className!
src/App.css에서 스타일링 하기
.heyhey{
font-size:50px;
color:aqua;
background-color: black;
}
Author And Source
이 문제에 관하여(2. JSX), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bbnerino/2.-JSX저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)