JSX

JSX(JavaScript XML)에 대해서 살펴본다.

JSX

JSX란 자바스크립트를 기반으로 하여 태그(Tag) 형태의 문서를 생성할 수 있도록 만들어진 템플릿 문법이다.

JSX 값 출력

JSX에서 Javascript 값을 출력하고 싶다면 중괄호 { } 를 사용한다.

const name = '피카츄';

app.render(
    <>
        <h1>Your name is {name}</h1>
    </>
);

계산하여 출력하는 것도 가능하다.

const number = 12.345;

app.render(
    <>
        <h1>Number : {number}, Round Number : {parseInt(number)}</h1>
    </>
);

조건부 출력

값에 따라 조건부 화면을 렌더링하는 것도 가능하다.

삼항연산자

삼항연산자는 조건식과 참/거짓일 경우에 대한 내용을 통해 화면을 구현한다. 구문 자체가 지저분하기 때문에 간단한 작업에서 사용한다.

const value = 5;

app.render(
    <>
        <h1>{value} is {value%2==0 ? '짝수':'홀수'}</h1>
    </>
);

if-else

JSX 내부에서는 if-else를 사용할 수 없으므로 외부에서 미리 Element를 생성하여 작성할 수 있다. 화면이 복잡해질 수록 이 방식이 유용하다.

const value = 5;

let el;
if(value % 2 == 0){
    el = <h1>{value} is 짝수</h1>
}
else {
    el = <h1>{value} is 홀수</h1>
}

app.render(
    <>
        {el}
    </>
);

객체 출력

객체가 데이터로 주어진 경우 이를 이용하여 화면에 출력할 수 있다. 객체의 요소에 접근하려면 참조 연산(.)을 사용한다.

const member = {
    id:"admin", 
    nickname:"관리자",
    password:"1234"
};

app.render(
    <>
        <h1>회원 정보</h1>
        <ul>
            <li>아이디 : {member.id}</li>
            <li>닉네임 : {member.nickname}</li>
            <li>비밀번호 : {member.password}</li>
        </ul>
    </>
);

반복 출력

배열에 대해 반복하여 화면 출력이 가능하다.

const lotto = [5, 13, 15, 23, 41, 44];
const lottoElement = lotto.map(number=><h2>{number}</h2>);

app.render(
    <>
        <h1>로또번호</h1>
        {lottoElement}
    </>
);

map은 배열 내부의 요소를 활용하여 다른 내용으로 변환할 수 있도록 하는 변환 함수이다.

key의 사용

key는 배열의 요소가 변하여 렌더링이 다시 일어나야 할 때 해당하는 요소를 별도의 탐색 없이 식별하기 위하여 부여하는 고유 값이다. 유일한 항목이 존재할 경우 사용하며, 객체는 지정할 수 없다.

const monsterList = [
    {no : 1 , name : "이상해씨", type:"풀"},
    {no : 4 , name : "파이리", type:"불꽃"},
    {no : 7 , name : "꼬부기", type:"물"},
    {no : 25 , name : "피카츄", type:"전기"},
    {no : 26 , name : "라이츄", type:"전기"}
];
const monsterElements = monsterList.map(monster=>
    <h2 key={monster.no}>번호 : {monster.no}, 이름 : {monster.name}, 속성 : {monster.type}</h2>
);

app.render(
    <>
        <h1>몬스터 목록</h1>
        {monsterElements}
    </>
);