| CSS 적용 방법
알다시피 CSS를 적용하는 방법에는 세 가지가 있다.
1. 인라인 스타일 : html태그마다 style속성으로 CSS 코드를 작성하는 방식
<p style=”color: tomato;”>내용</p>2. 내부 스타일 시트 : head태그 안에 style태그를 넣어 태그 안에 css 코드를 작성하는 방식
<head> <style> .title { color: tomato; } </style></head>3. 링킹 스타일 시트 : 외부 .css 파일에 css코드를 작성한 뒤, html 문서에 연결하는 방식
<link rel=”stylesheet” href=”./style.css”>
| JSX 문법으로 인라인 스타일 작성하기
이 중 첫 번째 방법인 인라인 스타일을 리액트에서 JSX 문법으로 작성할 때 주의해야 할 사항이 있다.
그것은 바로 ‘중괄호를 2개 써야 한다는 것’ !!
예를 들어, 아래와 같이 버튼 컴포넌트를 만들고
style 속성을 작성할 때,
다음과 같이 작성하면 오류가 난다.
function Btn({text}) {
return <button
onClick={changeValue}
style={ /*에러*/
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}>
{text}
</button>
}onClick 버튼과 같은 다른 속성들과는 다르게
style속성은 중괄호{}를 2개씩 써줘야 에러가 나지 않는다.
function Btn({text}) {
return <button
onClick={changeValue}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}>
{text}
</button>
}
| style 속성에 중괄호를 2개씩 쓰는 이유
style 속성은 중괄호 2개로 감싸줘야 하는 이유는 object 타입을 {중괄호}로 묶어주어야 하기 때문이다.
즉 가장 안쪽 중괄호는 object타입을 묶어주는 역할을 한다.
그리고 바깥쪽 중괄호는 변수를 묶어주는 역할을 하는 것이다.
따라서 Button 컴포넌트 코드는 다음과 같이 작성할 수도 있다.
function Btn({text}) {
return <button
onClick={changeValue}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}>
{text}
</button>
}function Btn({text}) {
const buttonStyle = {
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}
return <button
onClick={changeValue}
style={buttonStyle}>
{text}
</button>
}
| 스타일 내용을 작성할 때 주의사항
1. 리액트에서는 스타일 이름을 camelCase로 작성해야 한다.
backgroundColor (O)
background-color (X)
2. 단위를 생략할 수 있다.
다른 단위(em, rem, %)를 쓰고 싶을 때는 명시해주면 된다.
fontSize: “50”이라고 작성해도 에러는 안 나지만 default는 px이다.
'스터디 > React' 카테고리의 다른 글
| React Ref 개념과 사용하는 방법 (0) | 2024.03.05 |
|---|---|
| CSS 라이브러리를 사용하는 이유 (css scope) (0) | 2024.03.02 |
| JSX란? / JSX 문법 정리 (0) | 2023.08.11 |
