[React] react에서 css 스타일을 적용하는 방법

1. 컴포넌트 선언부에 style 적용하기

//속성 1개
<div style={{backgroundColor : “red”}} />
    
//속성 여러개
<div style={{backgroundColor : “red”, marginTop: "10px"}} />

위와같은 객체 형식으로 작성해줘야 한다.

주의: react가 js 라이브러리여서 - 를 쓰면 -(빼기) 연산자로 받아들이므로 camelCase를 이용한다.

• 단점
  • style의 재사용성이 떨어지므로 자주 쓰이지 않는 컴포넌트에만 사용하자.
  • 하나의 태그가 차지하는 영역이 커지므로 가독성이 안좋아진다.
    
    

2. class를 이용해서 style 적용하기( = 리액트 인라인 스타일)

.seHyun {
    background-color: red;
}
    
<div className="seHyun" />
    
//이런 방법을 사용하려면 .css 파일을 만들어서 사용할 수 있다. 
//.css 파일의 선언은, import '경로';

class가 아니라 className인 이유? : js의 class 예약어와 겹치기 때문

3. styled component 사용

const StyledDiv = styled.div`
    margin-top: 10px;
    background-color: red;
`
    
const App = () => {
    return(
    	<StyledDiv />
    );
}
    
export default App;

import styled from “styled-component”; 를 해주고 위와 같은 양식으로 사용하면 된다.

백틱안에 늘 쓰던 css 속성을 그대로 작성한다.

4. style 변수 사용

   const App = () => {
    const style = {
    	marginTop: "10px",
    	backgroundColor: red,
    }
    	
    return (
    	<div style={style} />
    );
}
    
export dafault App;

변수를 사용하므로 export 변수 안에 작성한다.

참고: https://www.robinwieruch.de/react-css-styling/