728x90 styled-component4 10.27.22{코딩일기}벨로퍼트와 함께하는 모던리액트 3-1챕터리뷰(2) [ 새롭게 알게된 것 ] 1. react-icons 라이브러리를 알게됨 설치방법은 아래와 같음 npm install react-icons --save 사용법은 해당 아이콘 디자인 변수명 그대로 호출해주면 됨 2. 일반 HTML 태그 외에도 커스텀 컴포넌트 태그를 Component Selector 기능을 사용해 넣을 수 있음 정말 놀라움. 아래 예시처럼 특정 커서가 해당 컴포넌트에 있을때 특정 컴포넌트 css를 조작할 수 있음. /* 컴포넌트 A */ const Remove = styled.div` display: flex; &:hover { color: #ff6b6b; } display: none; `; /* 컴포넌트 B */ const TodoItemBlock = styled.div` display: .. 2022. 10. 27. 10.23.22{코딩일기}벨로퍼트와 함께하는 모던리액트 2-3챕터리뷰(3) [ 새롭게 알게 된 것 ] 1. Button에 color props를 넣어주었다면 해당 컴포넌트 CSS도 props로 color변경해줘야됨 color도 넣어주고 app.js theme도 설정 다 했는데 여전히 바뀌지 않는다면? 버튼 색깔에 당황하지 말고 기존에 고정되어 있던 블루 배경색을 /* 색상 */ background: #228be6; &:hover { background: ${lighten(0.1, '#228be6')}; } &:active { background: ${darken(0.1, '#228be6')}; } 아래처럼 props를 변수로 받아 활용해주면 간단히 해결됨을 확인했음 /* 색상 */ ${props => { const selected = props.theme.palette[prop.. 2022. 10. 24. 10.21.22{코딩일기}벨로퍼트와 함께하는 모던리액트 2-3챕터리뷰(2) [ 새롭게 알게된 것 ] 1. styled-component는 스타일과 컴포넌트를 동시에 만들기 가능함 div를 스타일링하고 싶으면 styled.div 아래와 같이 만들기 가능 import React from 'react'; import styled from 'styled-components'; const Subject = styled.div` width: 5rem; ...생략 `; 2. 특정 props값을 기반으로 여러 CSS를 조건부로 보여주고 싶다면 직접 CSS 사용해야됨을 알게됨 const Circle = styled.div` background: ${props => props.color || 'black'}; ${props => props.huge && ` width: 10rem; height:.. 2022. 10. 23. 10.21.22{코딩일기}벨로퍼트와 함께하는 모던리액트 2-3챕터리뷰(1) [ 새롭게 알게된 것 ] 1. styled-componets는 js안에 css를 작성가능케한 현존 가장 인기있는 라이브러리임 이와 비슷하게 emotion과 styled-jsx가 있음 2. Template literals은 이전 ES5 'template strings'에서 이름만 바뀐거임 `string text ${expression} string text` 요렇게 문자열안에 변수넣을때 자주 썼던 문법임 이때 변수안에 문자열이나 숫자가 아닌 객체나 함수를 넣어줄 수 없음. 근데 이걸 가능케한 문법이 바로 Tagged Template Literal라는 거임. 사용법은 아래 참조 const red = '빨간색'; const blue = '파란색'; function favoriteColors(texts, ..... 2022. 10. 21. 이전 1 다음 728x90
