05. 리액트 컴포넌트 스타일링

00.개요

이번 챕터에서는 컴포넌트의 스타일에 대해 배워본다.
스타일 범위를 컴포넌트로 지정할때 쓰이는 테크닉등을 배우면서 동적인 스타일을 구성하고 모듈로서 어떻게 적용하는지에 대해 배운다.

01. 동적 인라인 스타일 설정하기

이번 챕터에서 제공된 예시파일의 초기상태에서는 아무것도 입력하지 않아도 빈 항목이 추가되는 상황이다.
그래서 빈 항목일 경우 추가가 되지 않고 입력창의 스타일이 붉은색으로 변하게 설정 할 것이다.

우선 아무것도 입력하지 않은 상황에서 추가되는것을 막아야한다.
이럴 경우에는 formSubmitHandler 안에 if문을 추가해서 length가 0일 경우 아무것도 return하지 않게 설정했다.
trim메소드는 입력내용에 띄어쓰기 같은거 있으면 제거해서 다 붙여버린다.
기능적으로는 구현되었지만 지금 상황에서 사용자에게 시각적으로 보이는 피드백이 없기 때문에 입력상태가 잘못되었다는것을 시각적으로 보여줄 필요가 있다.

우선 간단하게 inline으로 구현해보면 현재 입력상태가 유효한지에 대한 state를 만들고 그 state에 따라서 다른 스타일이 적용되도록 삼항연산자를 사용하면 된다.

마찬가지로 아래부분 입력창에서도 동일하게 스타일을 설정할 수 있다.
현재 상태에서 문제점은 우선 스타일이 변화한 이후에 제대로 입력값을 넣는순간에 다시 스타일이 리셋되지 않는다는 것이다.
그리고 inline으로 넣었기에 우선순위는 최상위로 적용되지만 유지보수 관점에서 굉장히 좋지 않기 때문에 css파일 같은걸로 적용하는것이 좋다.

우선 스타일 리셋에 대해 설정을 해보자면 onChange랑 묶어서 사용해서 입력한 내용을 가져오는 핸들러 안에다가 입력한 내용이 없을때에 대해서 조건문을 추가하면 된다.
입력한 내용은 핸들러에서 event.target.value로 오고 여기에 아까 했던것처럼 trim메서드를 사용해주고 length를 보고 실제 입력이 되었는지 확인한다.
입력값이 있을 경우에는 isValid를 true로 만들어줘서 스타일을 바꾸는것이다.

02. 동적으로 CSS 클래스 설정하기

그러면 inline으로 스타일을 설정하는 상황에서 className을 이용하여 css파일을 이용하는걸로 바꿔보자.
form-contorl과 invalid를 동시에 className으로 가지는 부분에만 스타일을 적용할것이기 때문에 저렇게 붙여주고 input과 label에 각각 스타일을 지정해준다.

그리고 템플릿 리터럴을 이용해서 내부에 삼항연산자를 넣어준다.
이러면 isValid state상태에 따라 className이 동적으로 변화하게 된다. (띄어쓰기 유의)

03. Styled Components 소개

앞서 써본 css파일에 대해 보면 해당 css파일의 스타일은 특정한 컴포넌트에서만 사용하는 것이 아니다.
다른 컴포넌트에서도 import해서 className 맞춰서 쓰면 사용이 가능하다.
전체 페이지의 엘리먼트에 영향을 줄 수 있는 상황이고 이게 나쁘다고 할 수는 없지만 문제는 프로젝트가 거대해지고 많은 개발자들이 하나의 프로젝트에 기여하다보면 중복되는 className이 나올 확률이 매우 높다.
이럴 경우 문제가 발생할수 있는데 이걸 피하는 인기 있는 두가지의 방법이 있다.

첫번째는 Styled Components라는 패키지를 사용하는것이다.
Styled Components는 특정 스타일이 첨부된 컴포넌트를 빌드하는 것을 도와주는 패키지이다.

npm install --save styled-components

프로젝트 폴더에서 해당 명령어로 설치하면 된다

우선 CSS파일에서 스타일 내용을 복사하면 이런 모습이다.
여기서 styled Components에 맞게 기재하면 된다.

const 컴포넌트명 = styled.button`내용`

이런식으로 템플릿 리터럴안에 사용하면 된다.
button은 styled라는 객체의 메서드이고 styled는 styled-components에서 가져온 객체이다.
두 백틱안에 기재한 스타일이 적용된 버튼이 되는 것이다.

사용하기 위해 좀 더 편집을 하자면 일단 import react from 'react'는 필요가 없기 때문에 지워도 된다.
className을 설정할 곳이 없기 때문에 그림처럼 그냥 백틱안에 스타일을 넣으면 직접적으로 Button에 적용되게 된다.
가상 선택자의 경우에는 &을 사용해서 사용한다.
default로 export된 버튼들을 우리가 button component에 전달 할 수 있는 모든 props를 받을 수 있다.

해당 class는 우리가 지은게 아니라 styled Components가 동적으로 생성한 것이고 styled components는 우리가 작성한 내용을 기초로 해당 버튼 UI를 그려내는 것이다.
이렇게 동적으로 이상하게 보이는 명칭으로 만들어졌기 때문에 고유한 className과 겹칠 일이 없고 그래서 위에서 말한것처럼 큰 프로젝트에서 같은 className을 사용해서 발생하는 문제를 해결 할 수 있다.

04. Styled Components & 동적 Props

button뿐만 아니라 div같은 다른 태그에서도 Styled Components를 적용 할 수 있다.
해당 부분에 대한 수정을 이번 챕터에서 해볼 것이다.
지금까지는 파일 하나당 하나의 컴포넌트를 가지고 있었고 일반적으로 이 원칙을 지키는것이 좋지만 정말로 해당파일의 다른 컴포넌트에서만 사용되는 컴포넌트가 있는 경우에는 같은 파일에 두개의 컴포넌트를 가지는것도 나쁘지는 않다.

이렇게 CourseInput 컴포넌트 내부에 FormControl이라는 컴포넌트를 하나 더 만들어준다.
이 컴포넌트는 styled를 사용하기 위한 컴포넌트이다.

className이 필요하니까 이런식으로 써도 되지만 props를 이용한 다른 방법이 있다.


이런식으로 props로 invalid를 보내고 FormControl에서 props를 ${}이용해서 삼항연산자를 사용하는것이다.

05. Styled Components & 미디어 쿼리

미디어쿼리를 이용할 수도 있다.
예시처럼 컴포넌트 만든거에다가 @media (조건){적용 스타일}해서 만들면 된다.
이러면 창이 작아질때 Add Goal 버튼이 100%가 되어서 크기가 커진다.

06. CSS 모듈 사용하기

위에서 설명한 styled components를 사용하지 않고 그냥 기존처럼 css파일 쓰면서 의도하지 않은 다른 컴포넌트에 영향을 주는걸 막을 수도 있다.
CSS 모듈이라는 기능이고 CRA에 기본적으로 포함되어 있어서 CRA 공식문서에서도 해당 기능에 대한 설명이 기재되어 있다.


사용하기 위해서는 css 파일을 .module.css 형식으로 바꾼다.
그리고 className에 styles를 넣어주는데 이건 객체형식이고 우린 button 관련한 내용만 지정하고 싶기 때문에 이런식으로 .button까지 붙여준다.

그러면 자동으로 class명이 이런식으로 고유해시가 붙어서 중복문제를 피할 수 있게 된다.
보다시피 CSS모듈, 빌드 프로세서가 내부에서 하는 작업은 CSS 클래스와 CSS파일을 가져와서 클래스 이름을 고유한 이름으로 바꾸는 것이고 이게 핵심작업이다.
import하는 css파일의 이름을 고유하게 바꾸는 것이라 css 파일에서 Button 컴포넌트에 import를 하면 이 컴포넌트에 대한 모든 styles와 classes의 고유한 클래스, 고유한 버전을 만드는것
클래스 이름만 새롭게 지어진거지 적용된 스타일들은 기존에 적어놓은것 그대로 적용이 된다.
이러면 결과적으로 css파일에서 설정한 스타일들의 적용범주는 import한 컴포넌트에 국한되는 상황인거다.

07. CSS 모듈을 사용한 동적 스타일

CourseInput 파일에 css모듈을 적용한다고 하면 우선 css파일 이름에 module을 넣어줘야 한다.
분홍박스 styles로 기재해놨지만 다른 명칭으로 사용해도 상관없다.
파란박스는 아까 Styled components 할때 쓴거고 둘 다 같이 쓰면 안되니까 지워준다.

이렇게 className에 styles라는 객체에 있는 요소들을 넣는식으로 사용하면 된다.
템플릿 리터럴을 이용하면 동적으로 쓸 수 있게 된다.

기본적으로 CSS파일을 적용하거나 Styled Components를 사용하거나 CSS모듈을 사용하는걸 배웠는데 자기가 좋아하는 식의 방식을 고르면 되고 이 강의는 강사가 CSS모듈(별개의 css파일이 존재하는걸 좋아함)을 선호하기 때문에 이후 강의는 CSS모듈을 사용한다.