#2.1 & #2.2 STYLED COMPONENTS

본 포스팅은 "노마드코더 React Js 마스터 클래스"를 수강한 뒤 작성되었습니다.

npm i styled-components

#2.1 Our First Styled Component

우리가 원하는 이름을 생성하고, 해당 이름을 < > </>안에 넣어서 작성하면 된다.

Styled Components의 동작 방식

• class명을 만들어 줌
• 우리가 적은 코드를 어딘가에 담아줌

예시는 다음과 같다.

import styled from "styled-components";

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

#2.2 Adapting and Extending

styled components를 작성하다보면, 몇몇 컴포넌트가 값을 제외하면 거의 똑같은 경우가 有

-> 컴포넌트를 설정 변경이 가능한 형태로 만드는 방법이 有😊 (확장시키는 방법)

props를 사용하는 방법으로 내가 원하는 속성을 상황에 따라서 변경시켜줄 수 있음.

import styled from "styled-components";

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

function App() {
  return (
    <div>
    	<Box bgColor="teal" />
    	<Box bgColor="tomato" />
    </div>
);

위의 예시에서는 props로 데이터를 받고 background-color를 변경시킬 수 있음을 보여준다.

❓❓ 그럼 어떻게 하면 컴포넌트에서 확장할 수 있을까 ❓❓

방법1) 컴포넌트를 변경 가능하게 하는 것

• 문제점 : 다른 컴포넌트의 동일한 속성 + 나만의 추가적인 속성을 더하고 싶은 경우, 코드를 중복 사용?

• Styled 함수를 사용하면 됨

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

//Box의 모든 속성을 가져온다는 뜻
const Circle = styled(Box)`
	border-radius: 50px;
`;

∴ 확장 : 기존 컴포넌트의 모든 속성을 들고와서 전부 복붙하고 새로운 속성까지 더해주는 것