styled components

처음으로 react를 공부하고 나서 css 사용에 익숙치 않고, 아직 흐름을 제대로 잡지 못한 상태에서 개발에 참여하게 되었다.

그렇기에 component 이름을 어떻게 정하는지도 잘 알지 못해 혼란스러웠다.

일단 해봐야한다는 생각, html, css, js 모두 처음 시작하는 만큼 결과물이 있어야 한다는 생각에 일단 뛰어들었다.

그 결과 나로 인해 style 간섭이 일어나버렸다...

 

결국 나는 잠시 프로젝트에 손을 떼게 되었지만 이번 일을 통해 style 간섭이 무엇인지 확실하게 알게 되었고,

다시는 같은 실수를 반복하지 않겠다는 다짐을 했다.

공유 받은 styled components에 대한 글을 공부하고, 정리한 내용이다.

 

---

styled components의 필요성

중복된 클래스명을 만들게 되면, 다른 컴포넌트 스타일에 영향을 줄 수 있다.

다른 목적을 위해 만든 클래스가 같은 이름으로 만들어지면, 각각에 간섭하게 되어 영향을 끼치게 되는 것이다.

이러한 문제를 해결하기 위한 방법 중 하나가 styled components 이다.

 

Styled components

styled components는 특정 스타일이 첨부된 컴포넌트를 구성할 수 있도록 도와주는 패키지이다.

이 패키지를 적용하면 해당 스타일이 첨부되는 컴포넌트에만 영향을 미치고, 다른 것에는 영향을 미치지 않는다.

 

styled components 사용 방법

1. styled components를 npm 설치 한다.

2. 사용하려는 컴포넌트에서 해당 패키지 import

 

styled.태그(백틱) 과 같은 구문을 사용한다.  (styled.태그`` )

백틱 관련 구문을 tagged template literal이라고 한다는데,이 부분은 그냥 넘어간다.

(백틱은 ' (작은 따옴표)와 비슷하게 생긴 문자이다. 이것조차 몰랐던 나...)

 

styled는 import하는 객체이고, 그 옆에 명시한 '태그'의 메소드에 접근할 수 있다.

즉, 백틱 사이에 들어간 부분이 전달하는 것인데, 이 백틱 사이에 있는 것이 결국 해당 메소드로 전달된다는 것이다.

그리고 해당 태그 메소드가 새로운 태그 컴포넌트를 반환한다고 한다.

 

글을 계속 읽다 보니 styled components는 어떻게 만들어지는지 궁금했다.

이름을 어떤 식으로 생성하는건지, 어떻게 코드를 만드는지 의문이 생겼다.

-> styled components로 만들어진 것들의 class 명은 해당 패키지에 의해 '동적'으로 생성이 된다.

-> 모든 클래스는 고유한 이름을 갖게 된다. 그렇기에 다른 컴포넌트에 영향을 주지 않는다.

 

styled components에서 css pseudo 선택자 및 중첩 선택자

이 부분을 정리하기 전에 css pseudo 선택자에 대해 조금 알고 싶었다.

pseudo는 보통 가상인 것에 이름이 붙는데, 이 또한 그러했다. 우리 말로는 '가상 선택자'라고도 부른다.

css pseudo 선택자는 html요소를 직접적으로 선택하지 않고 요소의 상태에 따라 선택하여 꾸며주는 것을 의미한다.

css pseudo 선택자에 대한 구체적인 정보는 이 글에서 배울 수 있다. (https://bio-info.tistory.com/67)

 

다시 돌아와 styled components에서 css pseudo 선택자 및 중첩 선택자를 사용하는 방법이다.

이 경우, & 이렇게 생긴 기호를 사용한다. &:hover 처럼 사용할 수 있다.

중첩 선택자의 경우, & label 혹은 &.invalid와 같은 방식을 사용한다.

& 기호는 생성된 컴포넌트를 참조한다. 

 

styled components에서 props 전달하기

styled components에 props를 추가하여 백틱 안에서 그 props를 사용할 수 있다.

이 방법을 사용하면 스타일을 동적으로 쉽게 바꿀 수 있다.

이는 백틱 사이에 $ 기호와 중괄호를 사용할 수 있으며, 다음과 같이 서로 다른 세 가지 방식을 통해 나타낼 수 있다.

<CircleStyled invalid={true}/>

// case 1
const CircleStyled = styled.div`
  border-radius: 100%;
  background-color: ${({ invalid }) => invalid ? 'red' : 'black'};
`;

// case 2
const CircleStyled = styled.div(({ invalid ) => `
  border-radius: 100%;
  background-color: ${invalid ? 'red' : 'black'};
`);

// case 3
const CircleStyled = styled.div`
  ${({ invalid }) => `
    border-radius: 100%;
    background-color: ${invalid ? 'red' : 'black'};
  `}
`);

 

styled component에서 미디어 쿼리

빈응형을 위해 미디어 쿼리를 사용하는데, 이를 styled component에서 사용하는 방법이다.

이 때는 @media와 옆 조건을 (min-width: 700px)처럼 적고, 해당 중괄호 안에 조건을 만족할 시 적용될 스타일을 적는다.

const Button = styled.button`
	width: 100%;

	@media (min-width: 700px) {
		// 브라우저 폭이 700px 이상인 경우에 적용되는 코드
		width: auto;
	}
`

 

 

이렇게 styled component에 대한 다음 글을 읽고 공부하며 정리해 보았다.

https://velog.io/@jangws/%EC%8A%A4%ED%83%80%EC%9D%BC-%EA%B0%84%EC%84%AD%EC%9D%84-%EB%B0%A9%EC%A7%80%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%9C-styled-components%EC%99%80-css-module

스타일 간섭을 방지하기 위한 styled components와 css module

 

이제는 조금 더 익숙하게, 흐름을 파악하여 즐겁게 코딩하고 싶다...

 

(웹을 너무 만만하게 봤던 나... 반성해...)