일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- django widget
- form
- AWS
- 알고리즘 문제
- 알고리즘 풀이
- django rest framework
- 알고리즘
- react
- DRF
- Baekjoon
- django ORM
- Django
- es6
- PYTHON
- HTML
- javascript
- API
- Algorithm
- CSS
- web
- 장고
- 알고리즘 연습
- Git
- java
- 파이썬
- js
- MAC
- 파이썬 알고리즘
- 백준
- c++
- Today
- Total
수학과의 좌충우돌 프로그래밍
[React] JSX 와 Component 본문
react 는 대부분이 새로운 개념없이 javascript 코드로 이루어져 있습니다.
하지만 새롭게 알아야하는 개념도 물론 존재하죠.
react 를 시작하기 전에 react 에서 새롭게 등장한 개념, JSX 를 살펴봅시다.
JSX
JSX 에 대해서 알아보도록 하겠습니다.
const element = <h1>Hello, World!</h1>;
주어진 변수는 바로 JSX 입니다.
어떤 것인지 이해가 가시나요?
JSX 는 javascript 와 XML 의 합성어로서 자바스크립트 문법의 확장판으로서 UI 가 실제로 어떻게 보일지를 설명해줍니다.
위에서 설명 했듯이 javascript, XML 을 합쳤기 때문에 두 언어의 장점을 모두 취하고 있습니다.
XML 과 같이 마크업 되어 있기 때문에 구조를 한 눈에 알아보기 쉽고 javascript 의 표현식도 사용이 가능해집니다.
{}
내부는 javascript 의 표현식으로 인식하게 됩니다.
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'minsung',
lastName: 'kang'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
JSX 는 Babel 에 의해서 React.createElement()
호출로 컴파일이 됩니다.
아래 예시를 컴파일 하면 어떻게 될까요?
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
아래와 같이 js object 로 변하고 이를 React elements
라고 합니다.
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
Component
component
는 처음 생긴 react project 에서도 찾아 볼 수 있습니다.
index.js
를 보면 <App />
이 등장합니다.
html 과 유사하긴 하지만 html 은 아닙니다.
이것이 바로 component
입니다.
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
component
는 UI 를 독립적이고 재사용가능하게 해주는 역할을 하며 함수, 클래스 두 가지 방법으로 구현이 가능합니다.
우선은 함수형 component
에 대해서 먼저 알아봅시다.
다음과 같이 component
가 정의되어 있으며 React elements
를 반환합니다.
// src/App.js
import React from 'react';
function App() {
return (
<div className="App">
hello
</div>
);
}
export default App;
컴포넌트를 직접 만들어봅시다.
src 안에 새로운 파일 Mycomp.js
을 만들어주고 react 를 import 합시다.
import React from "react"
함수를 정의하는데 함수의 이름 첫글자는 대문자로 해줍니다.
function Mycomp(){
return <h3>world!</h3>;
}
이를 다른 파일에서 사용하기 위해서는 export 를 해줘야합니다.
export default Mycomp;
다른 파일에서 export 한 component
를 사용하기 위해서는 import 해줘야합니다.
이제 index.js
에서 이를 import 해주고 사용해봅시다.
하지만 하나의 component
만 render 할 수 있기 때문에 App 과 Mycomp 두 개가 올 수 없고 에러가 발생합니다.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Mycomp from './Mycomp';
ReactDOM.render(<App /><Mycomp />, document.getElementById('root'));
Mycomp 를 App.js
에서 사용해봅시다.
import React from 'react';
import Mycomp from './Mycomp'
function App() {
return (
<div>
hello
<Mycomp />
</div>
);
}
export default App;
브라우저를 확인해보면 결과가 나온 걸 확인할 수 있습니다.
hello
world!
'웹프로그래밍 > React' 카테고리의 다른 글
[React] Axios 와 CSS (0) | 2020.01.27 |
---|---|
[React] Component Life Cycle method (0) | 2020.01.26 |
[React] Class Component 와 State (1) | 2020.01.26 |
[React] Props 와 proptypes (2) | 2020.01.25 |
[React] React 시작하기, create-react-app (3) | 2020.01.23 |