[React] JSX에서 {} 사용하기
2022. 1. 11. 22:39
반응형
React에서는 JSX를 javascript로 변환하기 때문에 javascript 문법을 사용하기 위해서는 따로 mark를 해주어야 한다. => { }
Javascript 코드
<div className="card__top--weather">{weather}</div>weather은 javascript 변수이다.
{ tags.map((tag, index) => {
return (
<div key={index} className="card__tags--tag">{tag}</div>
);
})
}map이 javascript 함수이기 때문에 {}로 둘러싸여져 있다.
inline style
import React from 'react';
import Hello from './Hello';
function App() {
const name = 'react';
const style = {
backgroudColor: 'black',
color: 'yellow',
fontSize: 24, // 기본단위 px
padding: '1rem' // 다른 단위 사용 시 문자열로 설정
};
return (
<>
<Hello />
<div style={style}>{name}</div>
</>
);
}인라인 스타일은 javascript 객체 형태로 작성해야 한다. 따라서 javascript 객체인 style을 {style}로 사용하는 것이다.
import React from 'react';
import Hello from './Hello';
function App() {
const name = 'react';
return (
<>
<Hello />
<div style={{
backgroudColor: 'black',
color: 'yellow',
fontSize: 24, // 기본단위 px
padding: '1rem' // 다른 단위 사용 시 문자열로 설정
}}>
{name}
</div>
</>
);
}import / export
const a = 1;
const b = 3;
export {a};
export const c = 2;
export default b;
=> import b, {a, c} from './Example';
예) import React, { useState } from 'react';
export default로 export된 것은 {}로 감싸지 않고 Import를 하고, 나머지는 {}로 감싸서 import한다.
728x90
반응형
'web > React' 카테고리의 다른 글
| [React] package.json 명령어 npm start / npm run build 스크립트 차이점 (0) | 2022.02.10 |
|---|---|
| [React] DOM & Virtual DOM / What is DOM? (0) | 2022.01.10 |
| [React] JSX 이해하기 (0) | 2022.01.06 |
| [React] npm start 시 process out of memory ERROR 발생 / Apple Slicon m1 (0) | 2021.12.06 |
Written by ner.o
개발자 네로의 개발 일기,
자바를 좋아합니다 !
댓글 개