리엑트에서 리엑트 요소(엘리먼트, DOM요소 라고도 할 수 있음)를 꾸며주는 방법에는 여러가지가 있다.

가장 작은 단위부터 시작하자.

인라인으로 꾸며주기

일단 html 예시부터!

<p style="color: orange; font-size: 20px;">orage</p>

JSX 예시

<p style={{color: 'orange', fontSize: '20px'}}>orange</p>
// 중괄호를 두번 쓰는 이유는 딕셔너리도 자바스크립트이기 때문이다.

혹은 이렇게 쓸 수 있다.

function App() {
	const styles = { 
		color: 'orange', fontSize: '20px'
	};
    
	return (
		<div className="App">
			<p style={styles}>orange</p> 
        </div>
    ); 
}

//이 경우에는 styles라는 변수를 함수 안에 잡아주고 그 변수를 return의 태그 안에 인스타일로 넣어주는 것이다.

CSS로 꾸며주기

src 폴더 안에 style.css파일을 만들고 그 안에 스타일을 정의하고, 그 파일을 불러다 사용하는 방법이다.
1. css 파일을 만든다.
2. css 파일을 채워주면서 .js파일에는 불러올 태그에 <div className='list'> 이런식으로 불러온다.
3. css 파일을 .js파일 상단에 import 해준다. import './style.css';

SCSS로 꾸며주기

SCSS? SASS의 3번째 버전이며 SASS의 모든 기능을 사용할 수 있고, CSS와 호환도 잘된다.
1. src폴더 안에 SCSS파일을 만든다.
2. 만약 css파일이 있었다면 그 내용을 SCSS파일 안에 복붙해준다.
3. import 해준다 import './파일명.scss';
4. 여기까지 해주면 에러가 난다! 그렇다 scss를 사용하기 위해서는 패키지를 설치해줘야 하는데 총 4개를 설치해줘야 한다.

yarn add node-sass open-color sass-loader classnames

프로젝트를 진행하고 있던 폴더로 터미널을 위치시킨 다음에 설치해주면 된다.
scss의 주요 문법

scss 공식문서
여기에 가면 공부할 수 있다.

가장 흔히 쓰는 문법의 키워트는 Nesting이라는 것인데, 쉽게 생각하면 치환이라고 생각해도 좋다.
자세한 건 공식문서에서 정확하게 공부하자

그리고 scss는 기본적인 문법이 css랑 같다!

styled-components

내가 가장 좋아하는 방법이다.
직관적이고 편리하다.
해당 컴포넌트 안에 styled-components라는 컴포넌트를 만들어줘서 태그처럼 사용하는 것이다.

1. 패키지를 설치해준다.

yarn add styled-components

2. 사용하기 위해서는 import해줘야 한다.

import styled from styled-components

3. 예시를 들어보자

.js 문서 안에 styled-components를 이용하여 아래와 같은 컴포넌트를 만들었다고 가정하자

const MyStyled = styled.div`
	width: 50vw;
    min-height: 150px;
    &:hover{
    	background-color: #ddd;
    }
`;

그렇다면 MyStyle이라는 이름의 태그를 div태그처럼 사용할 수 있는 것이다!

return (
	<MyStyle>
    
    	</MyStyle>
)

이것도 하나의 컴포넌트이기 때문에 프롭스를 넘겨줄 수 있다. 그리고 삼항연산자를 사용해 조건문도 가능하다.

function App() {
	return (
    		<div className='App'>
    			<MyStyled bgColor={'red'}> hello React! </MyStyled>
    		</div>
    );
}

const MyStyled = styled.div`
	width: 50vw; 
    min-height: 150px; 
    padding: 10px; 
    border-radius: 15px; 
    color: #fff; 
    &:hover{
		background-color: #ddd; 
    }
	background-color: ${(props) => (props.bgColor? "red" : "purple")};

컴포넌트의 이름은 첫글자 대문자인 카멜 표기법