styled-components

css 코드를 작성할 때 발생하는 여러가지 어려움을
CSS 컴포넌트화를 통해서 해결하는데 사용되는 라이브러리

1. 설치하기 : 터미널 입력 - npm install --save styled-components
2. import : 라이브러리를 사용할 파일 - import sty;ed from "styled-components"

Styled Components 문법

1. 컴포넌트 만들기

Es6 Templete Literals 문법 사용 : 백틱(`)으로 묶음

import styled from "styled-components"

const 컴포넌트이름 = styled.태그종류`
	CSS속성: 속성값;
	CSS속성: 속성값;
`;

export default function App() {
  return <컴포넌트이름 />
}

2. 컴포넌트를 재활용해서 새로운 컴포넌트 제작

재사용하는 컴포넌트의 CSS속성은 그대로 가져오고 추가 가능

const 컴포넌트이름 = styled(재활용하는 컴포넌트)`
	추가할 CSS속성 : 속성값;
	추가할 CSS속성 : 속성값;
`

3. Props 활용하기

${}을 사용해서 JS코드 사용 가능

const 컴포넌트이름 = styled.태그종류`
	CSS속성: ${(props)=> 함수 코드}
`

1) Props로 조건부 렌더링하기

// props가 skyblue라면 skyblue 아니면 white로 배경색
const Button = styled.button`
	background:${(props)=>props.skyblue ? "skyblue":"white"}
`

위에서 생성된 컴포넌트 활용법

export default fuction App() {
  return (
    <>
    <Button> Button </Button>
    <Button skyblue> Button </Button>
    </>
  );
}

➡️

2) Props 값으로 렌더링하기

• 삼항연산자 사용

const Button = styled.button`
	background: ${(props)=>props.color ? props.color:"white"}
`;
<Button> Button1 </Button>
<Button color="orange"> Button2 </Button>
<Button color="tomato"> Button3 </Button>

• or 연산 사용

const Button = styled.button`
	background: ${(props)=>props.color || "white"}
`;
<Button> Button1 </Button>
<Button color="orange"> Button2 </Button>
<Button color="tomato"> Button3 </Button>

4. 전역 스타일 설정

전역에 같은 스타일을 설정하고 싶을 때 사용 createGlobalStyle

1) import {createGlobalStyle}

import { createGlobalStyle } from "styled-components";

2) 컴포넌트 작성하듯이 스타일 작성

const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
    margin : 2px;
    border-radius : 5px;
	}
`

3) 최상위 컴포넌트에서 사용

function App() {
	return (
		<>
			<GlobalStyle />
			<Button>전역 스타일 적용하기</Button>
		</>
	);
}

#Styled Components 실습

import styled from "styled-components";

const ColorButton = styled.button`
  width: 100px;
  height: 100px; 
  background-color: blue;
  color: white;
  &:hover{
	background-color: skyblue;
	color: blue;
  }
`;

export default function App() {
  return <ColorButton> Practice! </ColorButton>
}

컴포넌트 UI 개발 도구 Storybook

Story book 설치

1. npx create-react-app storybook-practice
   설치할 리액트 프로젝트 생성

2. npx storybook init
   스토리북 설치 pakage.json을 보고 프론트엔드 라이브러리에 맞는 사용 환경으로 만들어주기 때문에
   리액트아닌 다양한 프론트엔드 라이브러리에서 사용 가능

3. npm run storybook
   스토리북 실행

➡️ 스토리북 사용하면 애플리케이션을 실행하고 이벤트를 통해 상태를
변경하는 과정을 거치지않아도 상태 변화에 따른 컴포넌트의 변화 확인 가능