Atomic Habits

https://styled-components.com/docs/basics#getting-started * styled.tag`` 는 return 이 포함된 func 외부에 생성한다. - 내부에 있다면 컴포넌트 라이프사이클에 따라 styled가 계속 생성되어 성능 저하 야기 import React from "react"; import styled from "styled-components"; // Create a Title component that'll render an tag with some styles const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; // Create a Wrapper co..

import React, { useState } from "react"; import styled from "styled-components"; function Example() { const [email, setEmail] = useState(""); return ( Hello Im new Button ); } const ExampleWrap = styled.div` background: ${({ active }) => { if (active) { return "white"; } return "#eee"; }}; color: black; `; const Button = styled.button` width: 200px; padding: 30px; `; // Button 컴포넌트 상속 const NewB..

Tagged Template Literal styled-components 에서는 스타일을 입력 할 때 Tagged 템플릿 리터럴(Template Literal) 이라는 ES6 문법을 사용합니다. 이 문법을 사용하는 이유는, `` 를 사용할 때 내부에 JavaScript 객체나 함수가 전달 될 때 이를 따로 추출하기 위함입니다. 예를들어서: `hello ${{foo: 'bar' }} ${() => 'world'}!` // 결과: "hello [object Object] () => 'world'!" 위 코드는 [object Object] 이런식으로 문자열로 들어가게되면서 형태를 잃어버리게 되는데요, 만약에 함수를 다음과 같이 만들어서 사용하면 이 템플릿 리터럴 안에 넣어준 값들을 온전히 알아낼 수 있게 됩..