styled component : 서브 파트 라이브러리 (외부 라이브러리) react에서 주는 게 아니라 외부에서 가져오는 라이브러리이다
https://styled-components.com/
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾
styled-components.com
npm
Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java
www.npmjs.com
위두가지 사이트가 외부 라이브러리를 받을 수 있는 사이트이다
npm사이트와 styled component 라이브러리 이 두 사이트의 차이점은 npm은 모아 놓은 거고 styled component 은 해당 라이브러리를 받는 사이트라는것이다. 해당 라이브러리의 문서가 있다는 게 큰 장점이다.
라이브러리를 다운받기전에는 서버를 꺼줘야 한다.
위 플러그인을 사용하기 위한 설정들
설정을 해주면 저장을 하는 시점에서 포맷을 하는데 설정하는 대로 코드가 자동정렬이나 ;을 붙여준다거나 하는 편리한 기능을 제공한다.
1.. prettierrc 파일 생성
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80
}
위와 같은 설정을 해주면 저장을 했을 시에 코드가 자동정렬이 되면서 동시에 ";"이 문법상 필요한데 기입을 안 했다면 자동으로 ;을 붙여준다.
스타일 컴포넌트
태그와 css가 함 쳐져서 자바스크립트 변수에 담은 뒤 레고 블록처럼 사용할 수 있게 하는 것이 컨포넌트라고 생각하면 쉽게 이해가 된다.
컨포넌트를 따로 빼서 저번 포스팅에 했던 상태도 적용해 볼 수 있다
'React' 카테고리의 다른 글
| React Hooks 실습 (0) | 2023.08.13 |
|---|---|
| React Hooks 개념 (0) | 2023.08.13 |
| React 컨포넌트 (0) | 2023.08.10 |
| React /삭제,수정/Fetch요청 (0) | 2023.08.10 |
| JSX문법 useState() (0) | 2023.08.10 |