[React] 리액트의 기초 문법 몇 가지_3탄

[React] 리액트의 기초 문법 몇 가지_3탄

 

 

<1탄>

[React] 리액트의 기초 문법 몇 가지_1탄

 

 

 

<2탄>

[React] 리액트의 기초 문법 몇 가지_2탄

 

 

 

 

11. JSX로 inline style 꾸미기

JSX로 inline style을 꾸미는 건 css와 문법이 비슷하면서도 조금 다르다.

<h1 style={{ color: "red", backgroundColor: "powderblue" }}>
    hello
</h1>

위와 같이 style={ } 안에 선언해야 하며, 이때 객체 전달해주기 위해 한 번 더 { }로 감싸줘야 한다.

속성명(key)은 카멜표기로 작성하고, 적용값(value)은 문자열처럼 " "로 감싸줘야 한다.

 

 

 

 

12. JSX에서 띄어쓰기(공백) 여러 번 하기

HTML에서는 공백을 여러 개 입력해도 브라우저에는 하나의 공백만 표현된다.

이 경우 공백 대신 &nbsp;를 입력하면 된다.

 

JSX에서도 공백 여러 개는 표현되지 않는다.

JSX에서는 &nbsp;가 아닌 \u00A0로 여러 개의 공백을 입력할 수 있다.