개발일지 TIL(Today I Learned)
[2023.07.07] 개발일지
이승재(Frontend Developer)
2023. 7. 9. 23:08
styled-components를 이용해 style를 꾸며보았다.
그러나 쉽사리 한 번에 되지는 않는다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
import React, { useState } from 'react'
import { addTodo } from '../redux/modules/todos';
import { useDispatch } from 'react-redux';
import { styled } from 'styled-components';
function Forms() {
const [title, setTitle] = useState('');
const [body, setBody] = useState('');
const dispatch = useDispatch();
return (
<formBox>
<div>
제목 : <inputBox
type='text'
value={title}
onChange={(event) => setTitle(event.target.value)}
></inputBox >
내용 : <inputBox
type='text'
value={body}
onChange={(event) => setBody(event.target.value)}
></inputBox >
</div>
<div>
<addBtn onClick={() => {
dispatch(addTodo({ title, body }));
setTitle('');
setBody('');
}}>추가하기</addBtn>
</div>
</formBox>
)
}
const formBox = styled.div`
display: flex;
justify-content: space-between;
background-color: #ffb1be;
border-radius: 5px;
padding: 25px;
font-weight: bold;
color: white;
align-items: center;
`;
const inputBox = styled.input`
height: 25px;
border-radius: 5px;
border: 3px solid #ffb1be;
`;
const addBtn = styled.button`
width: 100px;
height: 30px;
color: white;
background-color: #ff80a0;
`;
export default Forms
|
cs |
도대체 무엇이 문제일까.
찾아보니 정말 어이없는 문제였다. 변수명을 소문자로 시작하면 styled-components가 작동이 되지 않는 것이다.
변수명을
formBox => FormBox
inputBox => InputBox
addBtn => AddBtn
이렇게 변경해주니 정상적으로 작동이 되었다.
styled-components의 변수명은 대문자로 시작해야한다!!