[React] JSX (JavaScript Xml) 사용하기

JSX(JavaScript Xml)는 자바스크립트의 확장으로 템플릿처럼 보입니다. React는 웹페이지 전체를 갱신하는 것이 아니라 필요한 부분만을 갱신해서 빠른 속도로 동작합니다. 이처럼 React에서는 전체 페이지 내용이나 교체될 html 조각들을 만들게 됩니다. 이런 html 조각을 편리하게 만들 수 있도록 해주는 것이 JSX입니다.

 

JSX의 형태

 

JSX의 형태를 보겠습니다. 자바스크립트 문자열은 큰따옴표나 작은 따옴표로 둘러싸야 하지만 JSX는 그것이 없습니다.

 

const element = <div><h1>Hello React!</h1></div>;

 

JSX 는 하나의 엘리먼트만을 반환해야 합니다. 그래서 보통 <div> 엘리먼트로 감싸서 만들게 됩니다. 이렇게 하므로써 <div>태그가 중첩되게됩니다. 리액트 v16부터는 Fragment 태그를 사용해서 <div>태그 중첩 없이 여러 개의 태그를 쓸 수 있습니다.

 

const element = <Fragment>
<h1>Hello React!</h1>
<p>Fragment 태그는 컴파일 후 결과물에서는 없어집니다.</p>
</Fragment>;

 

표현식

 

JSX내에서 표현식을 사용하기 위해서 대괄호( { } )로 둘러 쌉니다.

 

const color = {color:"blue"};
const greeting = "Hello React!";
const element = <p style={color}>{greeting}</p>

 

TypeScript에서 style속성에는 객체를 사용합니다. 위에서 color처럼 속성값에 표현식이 사용되면 따옴표를 하지 않습니다.

 

반복문

 

JSX에서 반복되는 컨텐츠 작성을 위해 배열의 map 함수를 주로 사용합니다.

 

// 리스트 아이템에 사용할 내용을 가진 배열입니다.
const userArray = [
    {id:"kdhong", name:"홍길동"},
    {id:"chkim", name:"김철수"},
    {id:"yhkim", name:"김영희"},
];

// map() 함수를 사용해서 아이템을 생성합니다.
const userList = userArray.map(user => 
    <li key={user.id} id={user.id}>
        {user.name}
    </li>
);

// 표현식으로 합칩니다.
return (
    <Fragment>
        <ul>{userList}</ul>
    </Fragment>
);

 

- key 속성은 React가 항목을 변경, 추가, 삭제할 때 식별하는 것을 돕는다고 합니다. 이 속성은 결과 html에는 나타나지 않습니다.

- id 속성은 프로그램으로 아이템을 다룰 때 각각을 구별하기 위해서 넣은 것입니다. 필요에 따라 속성 이름을 바꾸거나, 추가하거나, 빼거나 할 수 있겠습니다.

- 컨텐츠로 name을 주었습니다.

 

// 이름 배열 입니다.
const nameArray = [
    "홍길동",
    "김철수",
    "김영희",
];

// 리스트 아이템을 만듭니다.
const nameList = nameArray.map((name, index) =>
    <li key={index}>{name}</li>
);

// 출력합니다.
return (
    <Fragment>
    <ul>{nameList}</ul>
    </Fragment>
);

 

key 속성은 주지 않을 경우 내부적으로 배열 인덱스가 사용되고, 콘솔에는 경고(Warning)이 발생합니다. 위 처럼 직접 index를 key로 사용할 수 있습니다. 하지만, 이 방식을 조회 전용일 경우에만 사용하고, 추가, 삭제 등이 필요할 경우에는 문제를 일으킬 수 있으므로 사용하지 않는게 좋다고 합니다.