React.js 공부노트 #3 styled-component 삽질기...

리엑트 공부 와중에 알게된게, 후배 하나가 나처럼 리엑트 헛발질을 열심히 하고있다는 소식을 접했습니다.

그 친구는 이틀전부터 CSS를 조금더 편하게 관리하기 위해서 어떤것을 사용해아하는가 에 대해 여기저기 찔러보고 다녔었고, 저 또한 기본 CSS말고는 써본적이 없었기 떄문에 아는바가 전혀 없었습니다.

그러는와중 상당히 잘 정리되어있는 블로그를 참조하고 제가 이번에 써볼 CSS모듈이 무엇이 될지 곧 정할 수 있게 되었습니다. 해외 유명포럼 Reddit을 몇년동안 잘 사용해왔던 터라 reddit에서 사용중엔 styled-component에 단박에 눈이 꽂혔고, 기본 react 강의의 흐름에 너무 다르지 않은 -러닝커브가 그다지 높지 않아보이는(component별로 jsx에서 작성하므로)- 것이 두번째 선정이유이며, 마지막으로 scss에서 사용할 수 있는 부모자식 관계 방식또한 가능했기 떄문에 선정을 하게되었습니다.


공식 도큐먼트에 따라 잘 작성중이었으나, 한가지 문제점에 봉착했습니다.

Header.js
...

class Header extends React.Component {
 render() {
  return(
   <header>
    <Foo/>
   </header>
  )
 }
}
export default Header;

App.js
import Header from 'some_location';
...

class App extends React.Component {
 render() {
  retrun(
   <Bar>
    <Header/>
   </Bar>
  )
 }
}
export default App;

의 코드가 있었습니다.
App.js 에서 style-component 모듈을 적용시켜 보았으며,
적용을 원했던것은 Bar 와 Header 두 DOM element였습니다.

App.js 에서 class define 이전에 한줄의 코드를 작성하는데,
const Bar = style.div` color : red; `;

이 코드를 작성하게 되면, Bar DOM element의 css가 적용이 되었습니다.
Header element또한 같은 방법을 사용하면 된다고 생각한 저는 아래 코드를 작성했었고
const Header = style.div` color : green; `;

에러를 만나는데, 이미 Header는 선언되어있음 이라는 에러를 만나게 됩니다.

그도 그럴것이 App.js 에서는 Header.js 를 import 하면서 Header 라는 변수명을 가진체 나왔기 때문에였습니다.

그럼 이를 해결하기 위해서는 변수명을 틀리게 하면 된다 인데,
App.js 에서
import Header as myHeader from ' ... ';

를 하게 된다면
<Bar>
 <myHeader/>
</Bar>

로 바뀌게 될것이고, style 또한 인식하지 못하게 될것입니다.

이러한 이유로 해결방법을 20분정도 찾아보았으나 마땅히 맞는 이슈를 찾지 못합니다.

한참 골똘이 생각하다가, 문제점을 다시 되짚어 보다 엄청난 사실을 깨달았는데...

<Bar> 와 <Header> 는 동일한 타입이 아니었습니다. 이는 가시적으로 보기쉽게 정리가 되어있을뿐, Bar는 DOM element가 맞으나, Header의 선언부를 보게되면
<div>
  <Foo>
</div>

라는 element들이 모아서 Header라는 변수명을 갖고있을 뿐 이었습니다.
그러니깐 DOM element가 아니니깐 스타일링을 할 수 없던것 이었습니다;;

이런 당연하고 뻔한걸 놓치다니..

그렇다면 이제 해결법은 너무나 단순해 집니다.
Header.js 에서 <div>를 스타일링 하면 되는것 이었습니다..