[React] JSX 사용법

 

• JSX  사용법 : JavaScript 코드 + XML / HTML

... XML / HTML

{JavaScript 코드}

... XML / HTML

 

 

• 예제 1

const name = '예은';
const element = <h1>안녕, {name}</h>;

ReactDOM.render(
    element,
    document.getElementById('root')
);

중간에 사용된 {name} 이 name 이라는 JavaScript 의 변수를 사용하기 위해서 중괄호를 사용하여 표현한 것이다.

 

 

• 예제 2

funtion formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: 'Yeeun',
    lastName: 'Oh'
};

const element = (
    <h1>
        Hello, {formatName(user)}
    </h1>
);

ReactDOM.render (
    element,
    document.getElementById('root')
);

 

• 예제 3

function getGreeting(user) {
    if (user) {
        return <h1>Hello, {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>
}

사용자 이름에 따라 다른 인삿말을 하도록 만든 함수이다.

사용자가 존재하면 Hello, {사용자 이름} 을 출력하고, 사용자가 존재하지 않으면 Hello, Stranger 을 출력한다.

 

 

• 예제 4 : 태그의 속성(attribute)에 값을 넣는 방법

// 큰따옴표 사이에 문자열을 넣거나
const element = <div tabIndex="0"></div>

// 중괄호 사이에 자바스크립트 코드를 넣으면 됨
const element = <img src={user.avatarUrl}></img>;

중괄호 안에 들어가는 건 자바스크립트 코드라고 보면 됨

 

 

• 예제 5 : 자식(children)을 정의하는 방법

const element = (
    <div>
    	<h1>안녕하세요</h1>
        <h2>열심히 리액트를 공부해 봅시다!</h2>
    </div>
);

상위태그가 하위태그를 감싸는 형식으로 작성하면 된다.

<div> 태그의 children 태그는 h1, h2 인 것이다.