[React] JSX에서 {} 사용하기

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한다.