React 숙련주차 (12/02) - (CSS-in-JS)
css-in-js란 무엇인가?
CSS-in-JS방식이란, 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식
styled-components 란 무엇인가?
우리가 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지
패키지란,
React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 써드파티 프로그램 입니다. 패키지들은 누군가에 의해 만들어진 것으로 npm에 모여 있어요. 우리는 사용하고자 하는 패키지를 npm install 또는 yarn add 를 통해서 설치해서 사용할 수 있어요.
조건부 스타일링이란?
classname을 사용해서 구현하기는 조금 까다로운 조건부 스타일링을 styled-components를 이용하면 간편하게 할 수 있습니다
Swtich문과 map을 사용해서 리팩토링 해보기
정리
- CSS-in-JS란, 자바스크립트로 CSS코드를 작성하는 방식을 말한다.
- props를 통해서 부모 컴포넌트로부터 값을 전달받고, 조건문을 이용해서 조건부 스타일링을 할 수 있다.
추가 검색
styled-components의 GlobalStyles 이란 무엇이고, 어떻게 사용해야 할까?
리액트를 사용할때 styled-component 라이브러리를 통해서 전역 스타일 지정이 가능하다.
전역스타일은 모든 html 요소에 대해서 공통적인 스타일을 가지는것이다.
예시로는 아래와 같다
- 모든 li 태그에서 list-style 제거하기
- a 태그에서 text-decoration 제거하기
- button 태그에 cursor: pointer 지정하기
만약 전역스타일을 사용하지 않는다면 각 페이지 마다 일일히 list-style: none, text-decoration: none 등을 적용해야된다.
GlobalStyles 의 사용방법
1. styled-component 설치
-- 자바스크립트 환경에서의 설치 yarn add styled-components
2. GlobalStyles 파일 생성
src -> GlobalStyles.tsx
3. 스타일을 정의할 코드작성
4.프로젝트에 전역 스타일 적용하기
css nesting 이란 무엇일까?
보통 css로 코드를 작성 시 부모 클래스를 써주고 자식이나 자손 클래스명을 써주어야했습니다 코드가 많아지면 많아질수록 가독성이 떨어지고 코드를 보기 힘들어지기도 하죠
하지만 Sass에선 부모 셀렉터를 줄여주고 HTML 구조에 따라서 눈에 보기 쉽게 코드를 작성할 수 있습니다
참조 - https://minjunkass.tistory.com/83
CSS reset 이란, 무엇이고 왜 필요한가?
우리가 html로 코드를 작성하고 브라우저로 실행을 해보면
내가 적용을 하지 않았는데도 자동으로 margin이 들어간 경우를 흔히 봤을 것이다.
이는 '웹 브라우저' 마다 default 값으로 스타일이 적용되어 있기 때문에
우리는 브라우저마다의 기본 디폴트 스타일 값이 아니라 동일한 CSS 스타일을 보여주기위해
이런 default 디폴트 값을 초기화 해주어야 한다.
1. 구글에 Reset CSS 라고 검색을 하고 초기화 코드를 찾는다.
2. 사용하는 웹 편집기로 돌아와 CSS 폴더에 reset.css 파일을 생성후 복사 붙여넣기 한다.
3. 작업하던 styles.css 파일에 @import를 사용해 리셋 파일을 추가해준다.
4. 초기화 코드 저장 후 크롬 개발자 도구에서 확인하면 브라우저 스타일이 초기화된 것을 확인할 수 있다.