[React] css, styled-component에서 & + & 의미

얼마 전에 리액트 코드를 보다가 styled-component에서 이런 부분을 봤다. 

& + & {
	margin-top:3rem;
}

css 연산자에서 &(엠퍼센트)를 쓰는걸 본적이 없었기 때문에 혹시 내가 모르는 선택자인가? 싶어서 검색을 해봤더니, css가 아니라 styled-component에서 쓰는 것이였다. (참고로 sass에서도 비슷하게 사용된다)

즉, 순수 css에서는 쓰이지 않는 표현이다. (내가 찾아볼 때 검색을 css 키워드로 했기때문에... 비슷한 루트로 검색을 해보는 사람을 위해 게시글 제목엔 css를 붙여뒀다.)

 

그래서 무슨 의미이냐? 

먼저 style-component에서의 &는 현재 요소를 뜻한다. 

 

예를 들면...

const Item = styled.div`
    &:hover{
    	background-color: blue;
    }
    & + & {
    	margin-top:3rem;
    }
`

위 코드에서는 Item 컴포넌트에 hover이벤트가 일어나면 background-color:blue가 적용된다. 

 

& + & 는 서로 옆에 붙어있는 요소들을 의미하는데, 

<div className="div1">
    <Item>Item1</Item>
    <Item>Item2</Item>
</div>
<div className="div2">
    <Item>Item3</Item>
</div>

여기서는 Item1과 Item2에 margin-top: 3rem이 적용된다. 

Item3은 div안에 Item이 하나만 있기 때문에 서로 붙어있지 않아, 적용되지 않는다. 

 

 

&의 더 많은 활용방법이 궁금하다면, 참고한 블로그 쪽 포스팅에 정리가 잘 되어있으니 그쪽을 참고하자. 

 

---

참고 자료

https://stackoverflow.com/questions/55728810/understanding-css-syntax

https://velog.io/@nowod_it/React-Styled-Components%EC%9D%98-Ampersand-%EC%9D%98%EB%AF%B8