jsx에 style을 넣어주기 위해서는 style = ' ' 이런식으로 쓰지 않고 style = {}을 사용해준다. 그 안에 {}를 사용해 동적 객체를 넣어준다.
하지만 이러한 인라인스타일보다는 css파일을 이용해 주는 것이 좋다.
class를 부여하기 위해 className을 사용한다.
function Post(props) {
return (
/**
* <div style={{color: 'red'}}>
* style 생성해주기 : {{}} 중괄호를 2개 쓰는 것이 아니라 style = {} 안에 동적객체를 넣기 위해 {}를 사용하는 것
* 이러한 인라인스타일보다는 css파일로 만들어주는 것이 좋다.
*/
// class 부여 : html과 다르게 jsx에서는 className을 사용
<div className="post">
<p>{props.author}</p>
<p>{props.body}</p>
</div>
);
}
export default Post;
이런식으로 전역적으로 사용하는 css에서 post라는 클래스이름을 찾아 줄 수 있다.
하지만 컴포넌트별로 css파일을 사용하는 것이 좋다.
먼저 css파일을 만들어 준다. 이때 .module을 사용한다.
vite나 CRA에게 css파일을 사용할 것이라는 것을 알려주고 자동으로 변환할 수 있게 해준다.
/* .module : css 모듈 기능을 한다는 것을 vite나 CRA에게 알려줌 */
.post {
margin: 1rem 0;
padding: 1rem;
background-color: #9c7eee;
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
animation: animate-in 1s ease-out forwards;
}
.author {
font-size: 0.8rem;
font-weight: bold;
color: #543280;
margin: 0;
text-transform: uppercase;
}
.text {
white-space: pre-wrap;
font-size: 1.25rem;
margin: 0.25rem 0 0 0;
color: #593884;
font-style: italic;
}
@keyframes animate-in {
from {
opacity: 0;
transform: translateY(1rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
import classes from './Post.module.css'
// classes : 객체로 선언해줌 -> 프로젝트에서 자동으로 css파일의 클래스를 변환해 찾아준다.
function Post(props) {
return (
/**
* <div style={{color: 'red'}}>
* style 생성해주기 : {{}} 중괄호를 2개 쓰는 것이 아니라 style = {} 안에 동적객체를 넣기 위해 {}를 사용하는 것
* 이러한 인라인스타일보다는 css파일로 만들어주는 것이 좋다.
*/
// class 부여 : html과 다르게 jsx에서는 className을 사용
// import 에서 객체로 선언한 classes의 객체의 프로퍼티(css파일 내부)에 접근 + 동적 데이터 {}
<div className={classes.post}>
<p className={classes.author}>{props.author}</p>
<p className={classes.body}>{props.body}</p>
</div>
);
}
export default Post;
css파일을 import해주고 classes나 styles 등으로 객체로 선언해준다.
css파일의 클래스를 자동으로 찾아주고 변환해줄 수 있다.
className도 classes라고 선언된 css파일의 클래스이름으로 접근해줘서 연결해준다.
실제로 변환되서 페이지로 보여지면 클래스이름이 자동으로 바뀌어 나오는 것을 볼 수 있다.