-
React Styled ComponentsFront-end/React 2023. 7. 12. 15:38728x90반응형
Styled Components
React styled components 란 js파일에서 css를 사용할 수 있도록 도와주는 Css-in-js 라이브러리이다.
styled components를 사용하기 위해 우선 설치를 해야한다.
npm install styled-components
터미널을 연 후 npm install styled-components 명령어를 입력하여 설치한다.
설치가 완료되면 이러한 로그창이 나타난다.
styled components 를 사용하기위해선 라이브러리를 불러와야한다.
import styled from 'styled-components';
import로 라이브러리를 불러 온후 변수를 만들어 styled components 문법을 사용하면된다.
// 태그로 사용할 변수명을 만든다. let YellowBtn = styled.button`// styled.태그명 을 입력한 후 백틱`` 속에 css를 넣어준다. background : yellow; color : black; padding : 10px; `;
styled components 문법을 사용하여 변수에 선언 뒤 태그로 사용한다.
// 태그를 만들어 태그속 문자를 입력한다. <YellowBtn>Button</YellowBtn>
css-in-js 로 적용된 버튼이 생성된다.
반응형Styled Components Props
정적인 css로 스타일을 설정할 수 있지만 props를 상속하여 비슷한 유형의 태그들을 중복처리 없이 만들 수있다.
// 태그 속 props 값을 보내고 싶은 속성을 설정한다 <YellowBtn bg="blue">Button</YellowBtn> <YellowBtn bg="orange">Button</YellowBtn>
styled component 태그 속 props를 설정하여 값을 저장한다.
props를 사용하기위해선 ${} 문법을 사용하여 선언된 props를 변수에서 받아 사용할 수있다.
let YellowBtn = styled.button` background : ${ props => props.bg }; // 태그 속 bg라는 속성의 값을 받아와 설정한다. color : black; padding : 10px; `;
각각의 태그들이 props의 값을 받아와 설정하여 css의 중복을 제거할 수 있다.
props를 활용하여 css에 조건을 설정하여 값을 제어할 수 있다.
let YellowBtn = styled.button` background : ${ props => props.bg }; // props의 값에 따라 color값을 변경한다 color : ${ props => props.bg == 'blue' ? 'white' : 'black' }; padding : 10px; `;
기존에 선언된 styled components를 상속 받아서 사용할 수 있다.
상속 받기 위해선 styled()함수 속 인자를 기존에 변수로 선언된 styled components를 넣어 상속받는다.
// 기존 styled components let YellowBtn = styled.button` background : ${ props => props.bg }; color : ${ props => props.bg == 'blue' ? 'white' : 'black' }; padding : 10px; `; // 상속받은 styled components // 인자속에 기존 styled components 변수를 넣어 상속한다. let NewBtn = styled(YellowBtn)` ... `;
<YellowBtn bg="blue">Button</YellowBtn> <YellowBtn bg="orange">Button</YellowBtn> // 상속받은 태그 <NewBtn bg="red">New Btn</NewBtn>
728x90반응형'Front-end > React' 카테고리의 다른 글
React Lifecycle & useEffect - 2 (0) 2023.07.12 React Lifecycle & useEffect - 1 (0) 2023.07.12 React Router URL 파라미터 (0) 2023.07.12 React useNavigate & Nested Routes & Outlet (0) 2023.07.11 React Routes & Route & Link (0) 2023.07.11