리액트를 사용할 때 css처럼 사용하려면 어떻게 할까?
Styled Components를 이용하면 된다.
import styled from "styled-components";
Styled-Components
import해 불러와준다.
vscode-styled-components
라는 에디터도 설치해주자
구분할 수 있는 태그로 변경해 작업을 해보겠다.
return (
<RootDiv>
<AppHeader>
<AppLogo src={logo} alt="app" />
<p>
Styled 적용을 위해 변경 된 App.js Edit <code>src/App.js</code> and
save to reload.{' '}
</p>
<MyA
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</MyA>
</AppHeader>
</RootDiv>
);
이제 변수선언 구간에 Styled-Components작업해보기
const RootDiv = styled.div` //변수로 해당 태그이름 지정, 태그 속성을 작업
text-align: center; //실제 css 서언 구간
`;
1.변수로 해당 태그 이름 지정
2.styled.해당 속성 기업
3. ``백틱 사이에 css style 입력
styled-components 선언
const RootDiv = styled.div`
text-align: center;
`;
const AppHeader = styled.header`
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
`;
const AppLogo = styled.img`
height: 40vmin;
pointer-events: none;
@media (prefers-reduced-motion: no-preference) {
animation: App-logo-spin infinite 20s linear;
}
`;
const MyA = styled.a`
color: #61dafb !important;
`;
전체 코드
import logo from './logo.svg';
import styled from 'styled-components';
import './App.css';
function AppCopy() {
const RootDiv = styled.div`
text-align: center;
`;
const AppHeader = styled.header`
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
`;
const AppLogo = styled.img`
height: 40vmin;
pointer-events: none;
@media (prefers-reduced-motion: no-preference) {
animation: App-logo-spin infinite 20s linear;
}
`;
const MyA = styled.a`
color: #61dafb !important;
`;
return (
<RootDiv>
<AppHeader>
<AppLogo src={logo} alt="app" />
<p>
Styled 적용을 위해 변경 된 App.js Edit <code>src/App.js</code> and
save to reload.{' '}
</p>
<MyA
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</MyA>
</AppHeader>
</RootDiv>
);
}
export default AppCopy;