[React] 체크박스 클릭시 다크모드 생성
2021. 2. 9. 18:05ㆍFRONT-END/REACT
|
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
|
//Dark.js
import React from "react";
function Dark() {
return <div class="Dark">다크모드입니다</div>;
}
export default Dark;
//Light.js
import React from "react";
function Light() {
return <div class="Light">라이트모드입니다</div>;
}
export default Light;
//App.js
import React, { useState } from "react";
import "./styles.css";
import Dark from "./Dark";
import Light from "./Light";
export default function App() {
const [isDark, setDark] = useState(false);
const onChange = ({ target }) => {
target.checked ? setDark(true) : setDark(false);
};
return (
<div className="App">
<div class="check-mode">
<input type="checkbox" onClick={onChange}></input>
다크모드
</div>
{isDark ? <Dark /> : <Light />}
</div>
);
}
|
cs |
Dark.js
import React from "react";
function Dark() {
return <div class="Dark">다크모드입니다</div>;
}
export default Dark;
Light.js
import React from "react";
function Light() {
return <div class="Light">라이트모드입니다</div>;
}
export default Light;
App.js
import React, { useState } from "react";
import "./styles.css";
import Dark from "./Dark";
import Light from "./Light";
export default function App() {
const [isDark, setDark] = useState(false);
const onChange = ({ target }) => {
target.checked ? setDark(true) : setDark(false);
};
return (
<div className="App">
<div class="check-mode">
<input type="checkbox" onClick={onChange}></input>
다크모드
</div>
{isDark ? <Dark /> : <Light />}
</div>
);
}
클릭시 isDark 는 True 반환되어 <Dark/> 실행 되고, 클릭이 해체 되었을때 useState(false)이므로 <Light/>가 실행된다.