what is postcss

postCss 공식문서
공식문서를 보면 설명되어 있지만, 포스트css는 리엑트에서 사용가능한 패키지로 상당히 다양한 플러그인을 보유하고 있으며, 점점 사용범위 사용량이 늘고 있는 아주 인기 있는 툴이다.

특장점

1.Less, Sass
를 기존 혹은 현재도 많이 사용하고 있으나, 위 도구들은
별도의 문법을 공부하고 사용해야 하는 단점이 있다.
postcss는 기존 css 문법의 틀을 크게 벗어나지 않은채로 사용하게 되어 더욱 각광 받고 있는 점이 첫번쨰
2.autoprefixer
두번쨰로는 위에 내장된 오토프리픽서 덕분에 webkit과 같은 브라우저간의 호환성 비율을 별도로 정의하지 않고 자동으로 지정하게 되어 편리한 것이 두번쨰
3.Module
각 컴퍼넌트에 맞춰 모듈화된 것을 끌어다 사용하기 떄문에 naming으로 구분지어 정의하지 않아도 간편한 장점이 있다.

PostCSS Plugins: https://www.postcss.parts/
Plugins Github 페이지: https://github.com/postcss/postcss/blob/master/docs/plugins.md

how to use

리엑트 패키지를 설치할떄 사용빈도가 높은 툴은 기본값으로 설치되게 되는데 포스트css는 보면 자동으로 설치가 되도록 정의되있다.
만약에 설치되지 않는 경우는 공식문서를 참조하도록 하자. 하지만 기본값으로 설정되어 있어 설치되는 것이 일반적이다.

컴퍼넌트 폴더 구축

components/componentnamefolder
위와같이 폴더를 생성하여 해당 폴더에 component.jsx
component.module.css
두가지를 생성하여 컴퍼넌트에 정의시기에 상단에

import styles from './header.module.css';

위와 같이 임포트 해준다.

 <header className={styles.header}>

그리고 정의는 위와같이 하며, css파일에

.header {margin: 20px}

예문과 같이 하나씩 정의하면서 정리하면된다.

예문에서 볼 수 있듯 이렇게 정리하면 중복되는 이름에 있어 구애받을 필요가 없게되며 각 폴더별로 구분되어 있어 추 후 수정사항이 있을떄 가독성도 좋아 편리하다.
많은 개발자들이 사용하는데에는 다 이유가 있다. ^^

그외 기타사용

React에서 제일 상위 파일 즉 컨텐츠 전체를 가운데 정렬 하고자 할때는
Index.css 에서 #root{display: flex; justify-content: center;}
로 지정해주면 된다.

<pre>

위 태그의 경우 별도의 정의가 없다면 파라그래프가 줄바뀜 없이 쭉 아래로 내려가지는 것을 확인 할 수 있다.
위 내용을 해결하기 위해서는 {white-space: pre-wrap;}
을 정의해주면 해결된다.