styled-components

보통 처음 웹개발을 배울 때 CSS, SASS, SCSS등
css를 작성하는 폴더나 파일을 별도로 두고 작성하는 경우가 많았습니다.

위의 방법으로 css를 작성하다 보면 불편한 점들이 하나둘씩 생기셨을 겁니다.

🤔 "매번 이름짓기도 힘들고... 파일도 헷갈려!!"

제가 느꼈던 불편함은 아래와 같습니다.

1. class와 id 이름을 짓는데 고민한다.
2. 많은 클래스 중첩으로 코드가 길어지고 원하는 부분 찾기가 힘들다.
3. 스타일 속성이 겹쳐서 예상치 못한 곳에서 원하는 결과가 안나오는 경우

styled-components는 CSS in JS 입니다.
간단하게 문법을 살펴보면

import styled from "styled-components";

const Button = styled.button`
  width: 10px;
  background: red;
  color: white;
  border: 2px solid white;

  ${props => props.color || `
    background: white;
    color: black;
  `}
`

function Sample({ children }) {
  return <Button color={color}>{children}</Button>;
}

이런식으로 props를 받아서 조건에 따라 스타일을 변경할 수 있습니다.
보시다시피 컴포넌트별로 스타일을 작성하기 때문에 해당 컴포넌트를 작성한 하나의 JS 파일 안에서 HTML + JS + CSS 까지 묶어서 컴포넌트 단위로 개발할 수 있습니다.

---

error

컴포넌트 단위로 개발할 수 있기 때문에 많은 중첩을 피할 수 있고 스타일의 속성이 겹치는 문제를 줄일 수 있다고 생각했습니다.
그래서 저는 이번 프로젝트에서 styled-components를 선택! (React를 사용하였습니다)

하지만, 기쁨도 잠시 문제가 발생했습니다😫
(styled-components를 완벽히 익히지 못한 탓..)

 <MatchesComponent className="matches">
   {matchData &&
        matchData[0].matches.map((value, index) => {
		// ...
          return (
            <section oneTop={+value.player.matchRank}>
             // ...
            </section>
          );
        })}
 </MatchesComponent>

const MatchesComponent = styled.article`
	section {
		border-color: ${props =>
    	props.oneTop === 99
      	? '#f2f2f2 #f2f2f2 #f2f2f2 #f62459'
      	: props.oneTop === 1
      	? '#f2f2f2 #f2f2f2 #f2f2f2 #07f'
      	: '#f2f2f2 #f2f2f2 #f2f2f2 #a1a1a1'};
	}
`;

props를 전달했는데 props.oneTop은 undefined인 상황🙄
console.log로 props를 보니 oneTop이라는 프로퍼티는 존재하지도 않았다

혹시 보이시나요 아주 멍청한 코드를 작성했다는게..?
styled-components 를 사용해서 만든 컴포넌트가 아닌곳에 props를 전달하고 있다는걸
출처 : https://giphy.com

props를 전달할 때는 반드시! component로 만든후에 전달하셔야 합니다😂

수정 후 :

<MatchesComponent className="matches">
   {matchData &&
        matchData[0].matches.map((value, index) => {
		// ...
          return (
            <RecordMatchComponent oneTop={+value.player.matchRank}>
             // ...
            </RecordMatchComponent>
          );
        })}
 </MatchesComponent>

const RecordMatchComponent = styled.section`
	section {
		border-color: ${props =>
    	props.oneTop === 99
      	? '#f2f2f2 #f2f2f2 #f2f2f2 #f62459'
      	: props.oneTop === 1
      	? '#f2f2f2 #f2f2f2 #f2f2f2 #07f'
      	: '#f2f2f2 #f2f2f2 #f2f2f2 #a1a1a1'};
	}
`;

(RecordMatchComponent 는 후에 별도 컴포넌트로 빼주었습니다.)
컴포넌트화를 생활화 합시다..!