해당 스타일이 해당 컴포넌트에서만 사용되게 스타일링 하는 방법!
Vue style의 scoped 태그와 유사한 느낌을 받았다.
styled components는 따로 설치가 필요하다.
import React from 'react'
import style from '../styles/Button.module.css'
function Button() {
return (
<button className={style.Button}>
<p>버튼</p>
</button>
)
}
export default Button
style.클래스이름
의 형태로 className
에 지정을 해줘야 한다. <button className={`${style.Button} ${style.large}`}>
// 사용 법
import styled from 'styled-components'
const (변수명) = styled.(태그명)`
`
// 사용 예시
import styled from 'styled-components'
export const Container = styled.div`
width: 100px;
background-color: blue;
`
import React from 'react'
import * as S from './style'
function Button() {
return (
<S.Button>
<p>버튼</p>
</S.Button>
)
}
export default Button
import * as S from './style'
로 가져오면, 앞서 작성한 스타일 파일 내부 변수들을 S 라는 이름으로 사용하겠다는 뜻이 되고 따라서 스타일 파일 내부 변수들을 S.(변수명)
형태로 사용할 수 있다.background-color: ${(props) => props.color || 'blue'};
-><S.Button color="#asdasd">
background-color: ${({ color }) => color || 'blue' }
background-color: ${({ isClicked }) => (isClicked ? 'gray' : 'blue')};
import styled, { keyframes } from 'styled-components'
const fadeIn = keyframes`
from {
opacity: 0
}
to {
opacity: 1
}
`
themeprovider 는 앱 전체에서 공통된 스타일 값을 쓸 수 있도록 도와주는 역할을 담당
팀 프로젝트할때 도입 하면 좋겠다고 생각했다.
styles 폴더 안에 theme.js 파일을 만들어서, 스타일을 지정한 뒤에
App.jsx에 themeprovider 로 감싸서, 앱 전체에 theme 에 정의한 스타일이 적용될 수 있도록 한다.
import { ThemeProvider } from 'styled-components'
import theme from './styles/theme'
import Button from './components/Button'
function App() {
return (
// hemeprovider 에 theme을 넘겨 준다.
<ThemeProvider theme={theme}>
<Button />
</ThemeProvider>
)
}
export default App
background-color: ${({ theme }) => theme.palette.orange};
import { createGlobalStyle } from 'styled-components'
import NotoSansBold from '../assets/fonts/NotoSansKR-Bold.otf'
export default createGlobalStyle`
@font-face {
font-family: "NotoSansBold";
src: url(${NotoSansBold}) format('opentype');
}
`
format(’opentype’) 부분은 폰트 파일의 확장자에 따라서 변경해야한다.
otf → opentype
ttf → truetype
woff → woff
import { ThemeProvider } from 'styled-components'
import theme from './styles/theme'
import Button from './components/Button'
import GlobalStyle from './styles/globalStyle'
function App() {
return (
<ThemeProvider theme={theme}>
<GlobalStyle />
<Button />
</ThemeProvider>
)
}
export default App
리액트 상태에서 객체를 수정할 때는 직접 수정하면 안된다!
리액트에서는 기존의 값을 가져온 뒤에 업데이트를 진행을 해야한다. 그래서 spread 문법(...
)을 사용해서 기존 객체를 복사하여 새로운 객체를 만들고 이 새로운 객체에서 상태를 업데이트 해줘야 한다.
예제 코드
import React, {useState} from 'react'
function TodoAdd() {
const [userInput, setUserInput] = useState({date: '', content: ''})
const userInputHandler = (e) => {
const {name, value} = e.target
// name 키를 가진 값을 value 로 설정
setUserInput({...userInput, [name]:value})
}
return (
<div>
<input type='date' name='date' onChange={userInputHandler}/>
<input name='content' onChange={userInputHandler}/>
<button>추가하기</button>
</div>
)
}
export default TodoAdd
...userInput
) 불러온 뒤에 수정하고 싶은 내용을 넣어줘야 한다.[name]:value
로 상태를 업데이트 할 수있다.[name]
과 대괄호를 사용하는 것은 변수로서 name이 들어올 수도 있고 nickname이 들어올 수 도 있다. 객체 키는 [name]: 'something'
이걸로 접근 및 값을 할당한다.불변성을 지켜야 리액트가 컴포넌트의 상태가 업데이트 되었음을 감지할 수 있고 필요한 부분을 재렌더링 할 수 있다고 한다! 기존 상태를 직접 수정하는 경우 재랜더링이 되지 않는다.
꼭 기억하기 !
리액트에서 객체를 업데이트하게 될 때에는 기존 객체를 직접 수정하면 안되고, 새로운 객체를 만들어서, 새 객체에 변화를 주어야 됩니다.
https://react.vlpt.us/basic/09-multiple-inputs.html