책 순서대로가 아닌 제가 급하게 공부하는 순서대로 먼저 정리를 하고 그 다음에 나머지를 천천히 정리해보도록 하겠습니다.
스타일드 컴포넌트란, 자바스크립트 파일 안에 스타일을 선언하는 방식입니다. 별도의 CSS파일이 필요가 없죠. 이 방식은 다양한 라이브러리가 있는 듯 한데, 저는 Styled-components를 공부했습니다.
여기선 tagged 템플릿 리터럴이라는 문법을 씁니다.
백틱으로 둘러싼 문자열에 스타일 정보를 넣는 것인데, 일반적인 템플릿 리터럴과 tagged 템플릿 리터럴의 차이점은 이쪽은 템플릿 안에 자바스크립트 객체나 함수 또한 전달할 수 있다는 것입니다.
Styled-components는 이것을 이용해 Styled-components로 만든 컴포넌트의 props를 스타일 쪽에서 쉽게 조회할 수 있도록 만듭니다.
styled-component를 사용하여 스타일링된 엘리먼트를 만들 때는, 컴포넌트 파일의 상단에서 styled를 불러오고 styled.태그명을 사용하여 만듭니다.
import styled from 'styled-components'
const MyComponent = styled.div`
font.size: 2rem;
`;styled.div 뒤에 tagged 템플릿 리터럴을 통해 스타일을 넣어 주면, 해당 스타일이 적용된 div로 이루어진 리액트 컴포넌트를 생성합니다. 위의 예시의 경우<MyComponent>ABCD</MyComponent>
로 사용할 수 있습니다.
div가 아닌 다른 태그에 스타일링을 하고 싶다면 styled.button, styled.input 같이 뒤에 붙는 태그의 이름을 바꾸면 됩니다.
사용해야 할 태그명이 유동적이거나 컴포넌트 자체에 스타일링을 해 주고 싶다면 다음과 같은 방법을 사용합니다.
const MyInput = styled('input')`
background: gray;
`이 방법은 태그의 타입을 styled 함수의 인자로 전달합니다.
const StyledLink = styled(Link)`
color: blue;
`이 방법은 컴포넌트 형식의 값을 넣어 줍니다.
컴포넌트를 넣어 줄 때에는 해당 컴포넌트의 classname props를 최상위 DOM의 className 값으로 설정하는 작업이 내부적으로 되어있어야 합니다.
styled-components를 사용할 때, 컴포넌트에게 전달된 props 값을 참조해서 스타일을 지정할 수 있습니다.
const Box = styled.div`
background: ${props => props.color || 'blue'};
`;props의 props.color 값을 조회해 background에 넣고 그 값이 없을 때는 or를 이용해서 blue를 기본값으로 설정하는 코드입니다.
이 코드는 <Box color="black"></box>과 같은 방식으로 사용합니다.
styled-components에서는 props값을 이용하여 조건부 스타일링을 할 수 있습니다.
우선 'styled-components'를 임포트할때 {css}를 같이 불러옵니다.
import styled, {css} from 'styled-components';이런 식으로요. 그 뒤 css를 설정할 때 템플릿 리터럴 내부에
${props =>
props.example &&
css`
(css 스타일 설정)
`}이러한 코드를 넣습니다.
css를 임포트한 이유가 이 조건문에서 스타일시트를 css로 감싸 주기 위해서입니다. 이렇게 하지 않으면 템플릿 리터럴이 아니게 취급되기 때문에 이 부분 내부에서 또 props의 값을 사용하지 못합니다.
사용방법은 <component>A</component><component example="true">B</component>
이러한 코드가 있을 때, 같은 컴포넌트에서 props값을 조절하는 것으로 A와 B의 스타일을 다르게 하는 것입니다.
반응형 디자인 부분은 아직 이해를 잘 못 했습니다. 좀 더 공부해야 합니다.
과제를 하면서 찾아낸 것인데, body,html 등의 태그에 스타일을 적용하기 위해서는 createGlobalStyle이란 것을 이용해야 합니다.
const GlobalStyle = createGlobalStyle`
body{
margin: 0;
padding: 0;
background: #e9ecef;
}
`리액트 트리 최상위에 이러한 방식으로 StyledComponent를 만들어 <GlobalStyle /> 을 끼워넣으면 컴포넌트가 렌더링될 때 주입돼서 렌더링됩니다.
