study/TIL

[TIL No.17] React_CDD, CSS_in_js

creatorAron 2023. 2. 20. 17:11
본 포스팅은 배우는 초기단계에 적는 것으로써 부정확한 정보가 포함되어 있을 수 있습니다. 제 설명으로 인해 혼란이 야기될 때는 저명한 분의 글이나 공식문서를 참조해주시면 감사하겠습니다.

 

공부방향에 대해 간략하게 한마디: 

여러가지 외부 컨텐츠나 강의를 통해 공부하는 것도 좋지만, 그 중심에 공식문서를 두고 공부하기로 하였다. 특히 React 같이  공식문서 업데이트도 빠르고 배우기 좋게 되어있는 경우에는 더욱 그렇게 할 것이다.

 

컴포넌트(Component)란?

컴포넌트가 무엇인지 진작에 정리했어야 하는 부분인데 소홀했던 것 같다. 이전에 리엑트 States&props를 배울 때부터 정리를 제대로 하고싶었지만 이해도가 부족하다는 생각에 머뭇거렸는데 간단하게라도 정리하고 점점 React를 자주 다루면서 이해도를 높이는게 좋겠다. 

 

컴포넌트를 흔히 블럭에 비유하여 블럭을 맞춰 원하는 어플리케이션을 조립하는 느낌으로 이해하도록 한다. 블럭이라고 생각하면 다른 어플리케이션을 만들 때도 비슷한 블럭이 필요한 경우 예전에 만든 것을 가져다 쓸 수 있고 실제 블럭이라면 복제가 안되지만 코드라면 복제가 무한정 가능하므로 동일한 어플리케이션을 만드는 중에 동일한 블럭이 계속 필요하다면 계속 가져다가 쓸 수 있다. 그리고 CSS_in_js에서 더 살펴보겠지만 비슷한 컴포넌트를 생성할 때 기본 틀을 가져다놓고 차이나는 부분만 바꿔서 쓰면 되므로 여러모로 컴포넌트를 기반으로 프로그래밍 하지 않을 이유가 없다.

더보기

오늘의 본격적인 공부를 시작하기전에 공식문서 연습과정을 깃허브와 연동해서 관리하면서 잔디를 심을 겸(요즘 코딩테스트 준비를 잠시 멈췄더니 잔디를 심을만한 행위를 하지 않아 4일간 잔디를 심지 못했기때문에....;;) 레포지토리를 만들었는데... 또 만들 때 readme 파일을 추가안해서 어떻게 추가하지 하다가 일단은 깃허브에 나와있는 CLI 명령어를 복붙해봤다.

1. add README.md

git add README.md 그냥하면 왜 안되는거야~ git init 때문인가!!

 

 

2. create-react-app

 

이건 또 왜 안되는거야~

냅다 적었는데 안돼서...이건 앞으로 많이 쓸 것 같아서 기록해둔다.

npx create-react-app

그리고... 무지성으로 CRA하는 것의 대안으로 Vita가 있다는데 이것도 추후에 사용해보고 싶다.

 

1. 컴포넌트의 종류

리엑트 공식문서에 따르면, 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있다. 

컴포넌트를 가장 간단히 정의하려면 다음과 같이 함수를 작성할 수 있다.

function Whatyouneed(food) {
  return <h1>What you need to eat more is {food.name}</h1>;
}

동일한 기능을 하는 클래스형 컴포넌트는 다음과 같이 작성할 수 있다.

class Whatyouneed extends React.Component {
  render(){
  return <h1>What you need to eat more is {this.props.name}</h1>;
  }	
}

2.컴포넌트 렌더링, 합성, 추출 등등

더욱 자세한 내용은 리엑트 공식문서를 따라가며 실습해본다면 더욱 이해하기가 좋다.

 

3. CDD란?

컴포넌트의 재사용성을 이용하여 비슷한 기능이나 동일한 기능을 가진 컴포넌트를 만들 때 더 나아가서는 비슷한 기능들의 조합이나 이미 있는 기능들을 조합하여 새로운 기능이나 서비스를 만들어야 하는 경우에 이미 있는 컴포넌트들을 최대한 활용하여 효율적으로 개발하는 것을 말한다.

속된말로 재탕할 수 있는 만큼 재탕을하고 필요한 부분만 조금 다르게 수정하거나 새로 개발을 하여 디자이너나 개발자 모두 동일한 작업을 반복하는 것을 피해 일하는 것을 말한다.

 

4. CSS_in_js

 

굉장히 작은 기능을 구현하면서도 있었던 고민인데, CSS파일의 양이 많아지면 많아질수록 내가 원하는 부분의 스타일 수정이 점점 어려움을 느꼈다. 리펙토링으로 그 양을 줄이는 데에는 한계가 있기 때문에 서비스가 구체화되고 규모가 커질수록 점점 읽기 복잡해지기 마련이다. 나만해도 이런 고민이 있는데, 큰 규모의 프로젝트를 하는 개발자들 역시 CSS를 작성하는 일관된 패턴이 없는 것이 고민이었다.

 

 이에 따라 CSS 전처리기(CSS Preprocessor)가 등장하였고, 전처리기에는 SASS,Less,stylus 등 다양한 종류가 있는데 프로그래밍적인 요소인 함수,변수,상속 등을 이용하여 구조화된 CSS를 작성할 수 있고 이에 따라 유지보수가 편리해지는 장점이 있었다. 그러나 전처리기는 그 자체로는 웹 서버가 인지하지 못하였고 이에 따라 전처리기 종류에 따라 컴파일링을 해주어야 했다.

 

... (변천사 생략)

 

여러가지  시도가 있었지만, React가 컴포넌트 기반으로 작성되듯이 CSS 역시 컴포넌트화하여 사용하는 아이디어가 생기게 되고, CSS-in-JS가 탄생하게 되었다.

 

CSS-in-js에 대표적으로 Styled-component가 있다는데 그것을 사용해서 앞으로 며칠간 실습을 할 것이고... 아마 계속 사용할 것 같다. 간단한 사용법을 알아보고 내일 과제를 해보도록 하자.

 

Styled-component?

 

스타일드 컴포넌트 공식문서에서 장점 부분을 요약하면,

  • 스타일에 대한 고유한 클래스 이름을 생성해주어, 클래스 이름의 중복이나 철자 오류에 대해 걱정할 필요가 없다.
  • CSS를 삭제하는 것이 쉽다. 자동으로 생성된 탓에 특정 클래스네임으로 요소를 찾는 것은 어려울 수 있다. 다만, 스타일이 적용된 요소가 삭제될 경우 해당 CSS가 같이 삭제되므로 별도로 사용하지 않는 CSS를 지우는 일이 줄어든다.
  • 간편한 유지보수: HTML 태그에 매우 많은 CSS가 중복적용된 경우 해당요소에 영향을 미치는 스타일을 찾기 위해 다양한 파일을(또는 코드들을) 검색할 필요가 없어져서 코드베이스가 아무리 크더라도 유지보수가 쉬워진다.

CSS_in_JS를 사용하는 주 목적인 유지보수의 편의성과 javascript 코드 안에서 css까지 관리하는 편의성, 컴포넌트화 시켜서 생기는 장점까지 서술하고 있는데, 더 자세한 내용은 공식문서를 참조하면 좋다.

 

 

 

 

5. Styled-component 사용법

사용법 역시 공식문서에 있는데, 앞으로 과제에 사용할 부분을 위주로 간단하게 정리해보자.

 

 

(1) 설치

# with npm
$ npm install --save styled-components

# with yarn
$ yarn add styled-components

필자는 npm으로 설치했는데 yarn도 써봐야겠다고 생각하지만 언제가 될지..?(큰 의미는 없겠지만 그래도 한 번은 해보고싶다.)

 

 

(2) 선택 권장사항

{
  "resolutions": {
    "styled-components": "^5"
  }
}

이러한 코드를 package.json에 넣으면 여러버전의 스타일드 컴포넌트가 설치되어 생기는 문제를 방지할 수 있다고 한다.

 

 

(3) import

import styled from "styled-components"

styled component를 사용하기 위해서는 필요한 파일에 import 해주어야 한다. 정확히는 component가 생성되는 파일에 import해주고 CSS스타일도 한 파일 안에서 관리하는 개념이다. 별도의 CSS파일이 필요없고 CSS도 컴포넌트화해서 Javascript 파일 내에서 재사용이 가능하다.

 

styled-component는 templet-literal로 작성해야하는데, 템플릿 리터럴과 관련하여 내 머릿속에는 백틱(`)을 사용한다는 것과 플레이스 홀더 ${}를 이용하여 변수명이나 함수명을 문자열이 아니라 코드 그대로 인식할 수 있도록 하는 것밖에 없는데 훨씬 많은 활용방법이 있다는 것을 이번에 알게되었지만 당장 활용은 어려워보인다..!!(아직 필요없기도하다.)🥲🥲

 

 

(4) 컴포넌트 생성

기존 React 컴포넌트를 생성하듯이 생성하되, styled.'element이름' + ` css문법에 따른 style 코드 `를 컴포넌트에 할당해주면 된다. 컴포넌트와 스타일사이 mapping을 없애는 거라는데 이것이 정확히 이해가 안되지만 내가 백틱 안에 작성한 스타일을 가지고 있는 컴포넌트가 생성되는 것과 동일하다고 한다. 예시에서는 title과 그것을 감싸는 요소를 각각 만들어 주었다.

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: red;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: white;
`;

 

(5) 컴포넌트의 재사용,활용

위에서 만든 Title 요소에 추가적인 CSS속성을 적용하거나 기존의 속성을 덮어씌워서 재활용하고 싶은 경우 styled.(기존의 컴포넌트 명)을 통해 재활용을 할 수 있다.

const BlueTitle = styled.(Title)`
  color: blue;
`;

아 역시 이런걸 보여주려면... CodeSandBox를 써야하는데... 곧 도입하겠다...ㅋㅋㅋ

바로 적용!! 이게뭐라고 거의 30분이 걸리는지 모르겠다..ㅎㅎ

 

애니메이션 적용하는게 너무 멋있어서 그것도 해보려고 했는데...

keframe이 왜.. 적용이 안되는지 연구를 더 해보고 업데이트 하겠...다(CodeSandBox 때문에 다소 지쳐버렸다)

 

 

(6) props 이용

 

 

 

분명 오늘 공부콘텐츠에 있는 props 이용은 어느정도 이해가 됐다고 생각했는데 공식문서에서 props.children을 이용해서 버튼 안의 텍스트를 reverse하는 부분이 잘 이해가 되지 않아서 다시 읽어보았다.

 

as

일단 as라는 property는 이미 존재하는 다른 컴포넌트의 스타일을 as라는 이름답게(?) 마치 그 컴포넌트인 것처럼 스타일을 그대로 가져와서 랜더링 할 수 있게한다. 예시에 나온 ReversedButton에서 ReversedButton이란 함수를 as property의 값으로 설정함으로써 자신의 텍스트를 뒤짚어서 렌더링하는데... as에 대해서 이해하기 위해 글씨를 yellow로 바꾼 YellowButton에 as property를 적용하여 사용법에 대해서는 이해도가 1 올라갔다. as의 경우, 본래 적용되어있는 스타일을 유지하면서 보여지는 것만 다르게 할 수 있는 것이 장점이다. 아니..!! 보여지는 것 뿐만이 아니라 원래 HTML tag는 유지하는데 기능을 다른 tag처럼 사용할 수 있다. div인데 button 처럼 이용하고 싶은 경우에도 유용하다.

함수를 as 의 값으로 줘서 랜더링 한 부분은 조금 더 공부해보고 보충하겠다.. 일단 저렇게 사용도 가능하다는 것을 확인할 수 있다.

 

props의 경우, props가 존재하는지 여부에 따라 조건부 랜더링을 설정하거나, props 값을 그대로 이용할 수도 있다.

 

해당부분들은 <br>로 한 줄 여유를 두고 YellowBotton 밑에 Button1,2의 케이스 별로 렌더링되는 것을 확인할 수 있다.

 

더 많은 활용내용이 있지만 계속 써보면서 styled-component를 자유자재로 활용할 수 있는 경우, 별도의 게시물로 만들어보려고 한다.(일단 포부는 좋다..!!😝😝)