JSX 스타일링 방법

리액트에서 html을 표현하기 위한 JSX를 작성할 때 주의 점을 살펴봅시다.

html과 매우 유사하지만 조금은 다른, jsx입니다.

1. 모든 돔 태그는 항상 닫혀있어야 한다.

html 태그 중에는 input, br과 같이 닫히는 태그가 없는 태그들도 있지만, jsx에서 에러가 난다.

xml 방식이기 때문이다. 셀프 클로징이라도 해야한다. 

ex) <br />

<div>
	<h1>회원가입</h1>
	<form action="">
        <input type="text" />
        <input type="text" />
        <input type="text" />
		<button>회원가입</button>
	</form>
	<span>둘러보기</span>
</div>

2. 하나의 컴포넌트의 최상단에는 모든 태그를 감싸고 있는 하나의 엘리먼트만 있어야 한다.

하나의 엘리먼트가 DOM 트리 구조를 가진 하나의 객체로 변환되어 이전버전과 지금 버전의 차이점을 알 수 있게 해준다. 만일 이렇게 감싸는 것이 의미없는 태그를 하나 더 쓰는 것 같아 싫다면 <Fragment></Fragment> 혹은 <></>로 감싸도 됩니다. 단, v16.2이상에만 사용 가능합니다.

3. 컴포넌트에 style을 입히려면 객체형으로 값을 전달해야 한다.

const style = {
	color: 'red',
	backgroundColor: 'blue'
}

<div style={style} />

// 혹은

<div style={{
	color: 'red',
	backgroundColor: 'blue'
}} />

여기서 눈에 띄는 점은 

- key값이 camelCase로 작성된 점(실제 css문법처럼 사용하려면 key값을 문자형으로 작성 - 하지만 리액트에서 콘솔에러를 냄),

- value값이 문자형일 경우 따옴표로 감싸진 점,

- Style attribute에 css를 작성하는 게 아닌 객체를 전달해 준다는 점입니다.

4. CSS파일로 style을 입히는 경우, css파일을 import한다.

import "./index.scss";

하지만 react에서 작성하는 css들은 전부 전역공간에 저장됩니다....

5. 예약어와 겹치는 경우, 기존 HTML과 약간 다르게 이름 변경이 있다.

<div className="app">

class는 javascirpt에서 이미 존재하는 예약어이기 때문에 class만 예외로 className이라고 적습니다.

 

<label htmlfor='radio'></label>

 props가 아닌 원래 html 속성값이라면 'html속성명'으로 표기해야 하는 것들이 있습니다.

 

 

============================

수정이력

2019.08.26

2019.08.28