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, ...values) {
  console.log(texts);
  console.log(values);
}
favoriteColors`제가 좋아하는 색은 ${red}과 ${blue}입니다.`

function sample(texts, ...fns) {
  const mockProps = {
    title: '안녕하세요',
    body: '내용은 내용내용 입니다.'
  };
  return texts.reduce((result, text, i) => `${result}${text}${fns[i] ? fns[i](mockProps) : ''}`, '');
}
sample`
  제목: ${props => props.title}
  내용: ${props => props.body}
`
/*
"
  제목: 안녕하세요
  내용: 내용은 내용내용 입니다.
"
*/

예시출처:https://react.vlpt.us/styling/03-styled-components.html

---

 

3. styled-components 사용법

---

$ yarn add styled-components

 

 

---