2. STYLED COMPONENTS

시작하기 앞서…

1. 리액트 앱 생성하기 : npx create-react-app react-masterclass

2. 쓸데없는 파일 삭제 :

   

   src 폴더 안에는 App.js, Index.js만 존재한다.

   App.js

   function App() {
   	return null;
   }
   
   export default App;

   Index.js

   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   
   ReactDOM.render(
   	<React.StrictMode>
   		<App />
   	</React.StrictMode>,
   	document.getElementById('root')
   );

3. styled component 설치 : npm i styled-components

styled components를 사용하기 전

import styled from 'styled-components';

function App() {
	return (
		<div style={{ display: 'flex' }}>
			<div style={{ backgroundColor: 'teal', width: 100, height: 100 }}></div>
			<div style={{ backgroundColor: 'tomato', width: 100, height: 100 }}></div>
		</div>
	);
}

export default App;

• div 투성이, 괄호 두번 … ⇒ 직관적 X

styled components 사용

• 사용 방법 : const 변수명 = styled.태그CSS코드; (`은 백틱)

import styled from 'styled-components';

const Father = styled.div`
	display: flex;
`;

const Box0ne = styled.div`
	background-color: teal;
	width: 100px;
	height: 100px;
`;

const BoxTwo = styled.div`
	background-color: tomato;
	width: 100px;
	height: 100px;
`;

function App() {
	return (
		<Father>
			<Box0ne></Box0ne>
			<BoxTwo></BoxTwo>
		</Father>
	);
}

export default App;

• styled component는 클래스명을 자동으로 만들어 준다.

styled component의 확장

• props 사용 → props ? 컴포넌트에 데이터를 보내는 방식
  • ${(props) ⇒ props.변수명}

import styled from 'styled-components';

const Father = styled.div`
	display: flex;
`;

const Box = styled.div`
	background-color: ${(props) => props.bgColor};
	width: 100px;
	height: 100px;
`;

const Text = styled.span`
	color: white;
`;

function App() {
	return (
		<Father>
			<Box bgColor='teal' />
			<Box bgColor='tomato' />
		</Father>
	);
}

export default App;

같은 CSS 코드에서 하나만 변경하고 싶을 때?

const Box = styled.div`
	background-color: ${(props) => props.bgColor};
	width: 100px;
	height: 100px;
`;

const Circle = styled.div`
	background-color: ${(props) => props.bgColor};
	width: 100px;
	height: 100px;
	border-radius: 50px;
`;

→ 현재 Box의 속성이 Circle 안에 다 들어있어서 중복이 발생한다.

• styled(확장하려는 변수명)확장내용;

const Box = styled.div`
	background-color: ${(props) => props.bgColor};
	width: 100px;
	height: 100px;
`;

const Circle = styled(Box)`
	border-radius: 50px;
`;

컴포넌트의 태그를 바꾸고 싶지만 스타일은 바꾸고 싶지 않은 경우?

⇒ 컴포넌트 안에 as=”바꾸고 싶은 태그명”

import styled from 'styled-components';

const Father = styled.div`
	display: flex;
`;

const Btn = styled.button`
	color: white;
	background-color: tomato;
	border: 0;
	border-radius: 14px;
`;

function App() {
	return (
		<Father>
			<Btn>Log in</Btn>
			<Btn as='a'>Log in</Btn>
		</Father>
	);
}

export default App;

+) styled components CSS 코드 내에서도 html 속성 설정이 가능하다.

const Input = styled.input`
	background-color: tomato;
`;

function App() {
	return (
		<Father>
			<Input required />
			<Input required />
			<Input required />
			<Input required />
			<Input required />
		</Father>
	);
}

⇒ styled.태그명.attrs({ html 속성값 })

const Input = styled.input.attrs({ required: true })`
	background-color: tomato;
`;

function App() {
	return (
		<Father>
			<Input />
			<Input />
			<Input />
			<Input />
			<Input />
		</Father>
	);
}

styled components의 애니메이션

1. helper function을 import

   import styled, {keyframes} from 'styled-components';

2. const 변수명 = keyframes애니메이션 코드;

const rotationAnimation = keyframes`
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
`;

1. CSS animation에 추가 : animation : ${애니메이션 컴포넌트명}

const Box = styled.div`
	height: 200px;
	width: 200px;
	background-color: tomato;
	animation: ${rotationAnimation} 1s linear infinite;
`;

component 안의 element를 선택하는 방법

1. Box 안의 span의 CSS 속성을 설정하고 싶으면 Box의 styled 속성에다가 span {} 을 추가해주면 된다.

   const Box = styled.div`
   	height: 200px;
   	width: 200px;
   	background-color: tomato;
   	display: flex;
   	justify-content: center;
   	align-items: center;
   	animation: ${rotationAnimation} 1s linear infinite;
   	span {
   		font-size: 36px;
   	}
   `;
   
   function App() {
   	return (
   		<Wrapper>
   			<Box>
   				<span>🤩</span>
   			</Box>
   		</Wrapper>
   	);
   }

   +) & ⇒ 자기 자신 호명

   span {
   		font-size: 36px;
   		&:hover {
   			font-size: 40px;
   		}
   	}

2. 태그명에 의존하지 않는 방법

   ⇒ styled component를 따로 생성해서 ${} 안에 넣어준다.

   const Emoji = styled.span`
   	font-size: 36px;
   `;
   
   const Box = styled.div`
   	height: 200px;
   	width: 200px;
   	background-color: tomato;
   	display: flex;
   	justify-content: center;
   	align-items: center;
   	animation: ${rotationAnimation} 1s linear infinite;
   	${Emoji} {
   		&:hover {
   			font-size: 98px;
   		}
   `;
   
   function App() {
   	return (
   		<Wrapper>
   			<Box>
   				<Emoji>🤩</Emoji>
   			</Box>
   		</Wrapper>
   	);
   }

   테마(theme) 사용하기

   theme : 기본적으로 모든 색상들을 가지고 있는 object

   이용방법

   • Index.js ⇒

     1. import { ThemeProvider } from 'styled-components';,

     2. <App/>을 <ThemeProvider>로 감싸기

     3. 테마 색상이 담긴 객체를 생성해서 의 theme의 props로 전달

        import React from 'react';
        import ReactDOM from 'react-dom';
        import { ThemeProvider } from 'styled-components';
        import App from './App';
        
        const darkTheme = {
        	textColor: 'whitesmoke',
        	backgroundColor: '#111'
        };
        
        ReactDOM.render(
        	<React.StrictMode>
        		<ThemeProvider theme={darkTheme}>
        			<App />
        		</ThemeProvider>
        	</React.StrictMode>,
        	document.getElementById('root')
        );

   • App.js ⇒ 적용방법 : ${(props) ⇒ props.theme.객체명

     const Title = styled.h1`
     	color: ${(props) => props.theme.textColor};
     `;
     
     const Wrapper = styled.div`
     	display: flex;
     	height: 100vh;
     	width: 100vw;
     	justify-content: center;
     	align-items: center;
     	background-color: ${(props) => props.theme.backgroundColor};
     `;