React-master #1

그럼 가보자고~

---

✅ Styled Components

Styled Components란

styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다.

• styled-coponents 는 styled-components 라이브러리를 사용하여 리액트 컴포넌트를 쉽게 만들 수 있으며 Javascript 코드 내에서 일반 CSS로 구성 요소의 스타일을 지정할 수 있다!

• 설치

npm i styled-components

• 사용방법

const {내가 정한 component 이름} = styled.{태그명} ``;

• 사용
  • 예제 1)

import styled from "styled-components";

const Button = styled.button``;

• styled-components 라이브러리에서 import 해온 styled라는 객체를 이용한다.
• button 태그의 스타일 컴포넌트를 만들 거라고 적은 것.
• 백틱(``)안에 CSS를 넣어주면 된다.

import styled from "styled-components";

const Button = styled.button`
	background-color : black;
    color: white;
`;

• 만든 styled components는 이제 어디서든 사용할 수 있다!

function App() {
	return (
    	<Button>Button_1</Button>
        <Button>Button_2</Button>
        <Button>Button_3</Button>
    )
}

• 이름은 다르지만 생김새는 같은 버튼 3개 탄생~
  • 예제 2)

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

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

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

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

• 박스가 생기고

• Class Name도 랜덤으로 주어진다.
• 여기에 text도 추가

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

function App() {
	return 
		<Father>
        	<BoxOne>
            	<Text>Hello</Text>
            </BoxOne>
   			<BoxTwo/>
        </Father>
}

• 여기까지 적힌 코드를 보면,
  <BoxOne/> 과 <BoxTwo/> 스타일 컴포넌트에서 다른 점은
  background-color 차이 뿐이다.

Styled Components 확장_prop

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

function App() {
	return 
		<Father>
        	<Box />
            <Box />
        </Father>
}

• <BoxOne /> 과 <BoxTwo /> 를 합쳐 <Box /> 하나의 컴포넌트로 만들어주자
• 그러면 background-color 가 'teal'인 상자 BOX가 생긴다.
• props 기능을 사용해 background-color 를 변경 가능한 속성으로 지정해주자

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

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

• box 컴포넌트에서 bgcolor 값을 지정하고,
  해당 prop 들을 컴포넌트에서 받아주면 적용할 수 있다!

Styled Components_styled()

• 또다른 컴포넌트 확장 방법
• 다른 컴포넌트의 스타일을 상속하는 새 컴포넌트를 쉽게 만들려면 styled() 생성자에 구성하면 된다.
• 즉, 기존 컴포넌트를 통해서 새로운 컴포넌트를 만들어내려면!
• 사용방법
  • 예제 1)

const Button = styled.button`
	padding: 0.25em 1em;
	border: 2px solid palevioletred;
`;

const TomatoButton = styled(Button)`
	color: tomato;
`;

• 위에서 설정한 Button 컴포넌트의 코드를 그대로 가져와
  폰트 컬러 tomato 값을 추가한 TomatoButton 가 생기는 것!

Styled Components_as

• as을 사용하면 element를 다른 element로 교체할 수 있다.
• 예를들어, 컴포넌트의 태그는 바꾸고 싶은데 스타일은 바꾸고 싶지 않을 때에 사용하기 좋다
• 사용방법
  • 예제 1)

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

fucntion App() {
	return (
		<Btn>Log in</Btn>
        <Btn>Log in</Btn>
	)
}

• 로그인 버튼이 2개 생겼다!
• 그런데 갑자기 버튼 중 1개는 button html 태그말고 a 태그로 만들고 싶어졌다면?

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

fucntion App() {
	return (
    	<Btn>Log in</Btn>
		<Btn as="a" href="/">Log in</Btn>   <<<-----
	)
}

• as prop 을 사용하여 button 태그를 a 태그로 바꿨다 :)

Styled Components_attrs({})

• Styled Components를 사용해 HTML 태그의 속성을 정할 수도 있다!
• 예제 1)

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

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

• 총 5개의 <Input /> 컴포넌트가 전부다 required 여야 한다고 했을때,
  <Input /> 컴포넌트 하나하나에 prop 으로 required 를 주지 않아도,

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

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

• attrs({ }) 안에 후에 input 으로 전달될 모든 속성을 가진 오브젝트를 담아주면 된다.

---

• Styled Components 🚩 https://styled-components.com/
• 자동완성 플러그인 vscode-styled-components