ย
11.1 useDebugValue๋?11.2 React Developer Tools ์ค์น๋ฐฉ๋ฒ ๋ฐ ์ฌ์ฉ๋ฐฉ๋ฒ11.2.1 ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ํ์ฅ ํ๋ก๊ทธ๋จ ์ค์น11.2.2 ๋
๋ฆฝ ์คํํ ํ๋ก๊ทธ๋จ ์ค์น 11.2.3 React Developer Tools ์ฌ์ฉ๋ฐฉ๋ฒ11.3 ์ปค์คํ
ํ
๋๋ฒ๊น
ํ๊ธฐ11.4 useDebugValue ์ฃผ์์ฌํญ & ๊ฐ์ ์ฌํญ11.4.1 useDebugValue ์ ์ฌ์ฉ์ ์ฃผ์์ฌํญ11.4.2 useDebugValue๋ฅผ ๋ ํจ์จ์ ์ผ๋ก ์ฌ์ฉํ๊ธฐ
ย
11.1 useDebugValue๋?
ย
useDebugValue๋ React Developer Tools ๋ด์์ ์ปค์คํ
ํ
์ ๋ด๋ถ ๋
ผ๋ฆฌ์ ๋ํ ์์ธํ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ ๋นํธ์ธ ํ
์
๋๋ค. useDebugValue๋ ์ปค์คํ
ํ
์ ๋๋ฒ๊น
ํ ๋ ํจ์ฌ ๋ ๋์ ๋๋ฒ๊น
๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
ย
๋๋ฒ๊ทธ(debug)๋?
๋๋ฒ๊ทธ(debug) ํน์ ๋๋ฒ๊น
(debugging)์ ๊ฐ๋ฐ ๋จ๊ณ ์ค์ ๋ฐ์ํ๋ ์์คํ
์ ๋
ผ๋ฆฌ์ ์ธ ์ค๋ฅ๋ฅผ ์ฐพ์๋ด๊ณ , ๊ทธ ์์ธ์ ๋ฐํ๊ณ ์์ ํ๋ ์์
๊ณผ์ ์ ์ผ์ปซ์ต๋๋ค.
ย
useDebugValue๋ ๋ค์๊ณผ ๊ฐ์ ํ์์ผ๋ก ์ฌ์ฉํฉ๋๋ค.
ย
useDebugValue(debugValue) // ๋๋ useDebugValue(debugValue, debugValue => debugValue.toString());
ย
React Developer Tools ๋ด์์ ๋๋ฒ๊ทธ ๊ฐ์ ํ์ํ ๋, ํ์์ ์ง์ ํ๋ ๊ฒ์ด ๋น์ฉ์ด ๋ง์ด ๋๋ ์์
์ผ ๊ฒฝ์ฐ์ผ ์ ์์ต๋๋ค. ์ปค์คํ
ํ
์ด ๊ฒ์ฌ๋์ง ์๋ ํ, ํ์์ ์ง์ ํ๋ ์์
์ด ๋ถํ์ํ๊ธฐ ๋๋ฌธ์, useDebugValue์ ๋ ๋ฒ์งธ ์ธ์๋ก ํจ์๋ฅผ ์ ํ์ ์ผ๋ก ์ ๋ฌํ ์ ์์ต๋๋ค.
11.2 React Developer Tools ์ค์น๋ฐฉ๋ฒ ๋ฐ ์ฌ์ฉ๋ฐฉ๋ฒ
ย
React์์๋ ์ฃผ๋ก props์ state๋ฅผ ํตํด ์ค์์ ์์ธ์ ์ถ์ ํฉ๋๋ค. props์ state๋ฅผ ์ถ์ ํ์ฌ ์ด๋ค ์ปดํฌ๋ํธ์์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋์ง ํ์ธํ ์ ์๋ค๋ฉด, ๋ค๋ฅธ ๋ฌธ์ ์์ธ๊ณผ ๋ถ๋ฆฌํ ์ ์์ต๋๋ค. ์ด๋ ๊ฒ ๋ค๋ฅธ ๋ฌธ์ ์ ๋ถ๋ฆฌํ ์ ์๋ค๋ฉด, ๋ฌธ์ ๋ฐ์ ์์ธ์ ๋์ฑ ์ฝ๊ฒ ๋ฐ๊ฒฌํ ์ ์๋ค๋ ์ฅ์ ์ด ์์ต๋๋ค. ๋ฐ๋ผ์, ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ ๋ ์ฝ๋ ๋ฒ ์ด์ค(Codebase)๋ก ์ธํ ์ค์์ ์์ธ์ ์ถ์ ํ ์ ์๋๋ก ํ๊ฒฝ์ ๋ง๋๋ ๊ฒ์ ์ค์ํฉ๋๋ค.
๊ฐ๋ฐ ์ ํ๋ฉด์์ ๋ ๋๋ง ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ ๊ฒฝ์ฐ, React Developer Tools๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ค props ํน์ state์์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋์ง๋ฅผ ํ์ธํ ์ ์์ต๋๋ค. React Developer Tools๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด๊ธฐ ์ํด, ๋จผ์ React Developer Tools๋ฅผ ์ค์นํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
ย
11.2.1 ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ํ์ฅ ํ๋ก๊ทธ๋จ ์ค์น
ย
ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ์์ React Developer Tools๋ฅผ ํ์ฅ ํ๋ก๊ทธ๋จ์ผ๋ก ์ฌ์ฉํ๋ ค๋ฉด ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ๋ฅผ ๋ฏธ๋ฆฌ ์ค์นํด์ผ ํฉ๋๋ค. ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ์์ ์น ์คํ ์ด ํ์ด์ง๋ก ์ด๋ํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์น ์คํ ์ด ํ์ด์ง์์ React Developer Tools๋ฅผ ๊ฒ์ํ ๋ค, ํด๋น ํ๋ก๊ทธ๋จ์ โํฌ๋กฌ์ ์ถ๊ฐโ ๋ฒํผ์ ๋๋ฌ ํฌ๋กฌ์ ์ถ๊ฐํฉ๋๋ค.
ย
ย
ํด๋น ํ๋ก๊ทธ๋จ์ ํฌ๋กฌ์ ์ถ๊ฐํ๋ค๋ฉด React๋ฅผ ์คํํ ๋ธ๋ผ์ฐ์ ์ ๊ฐ๋ฐ์ ๋๊ตฌ์์ Components ํญ์ผ๋ก ์ด๋ํ์ฌ React Developer Tools๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
ย
ย
11.2.2 ๋ ๋ฆฝ ์คํํ ํ๋ก๊ทธ๋จ ์ค์น
ย
๋
๋ฆฝ ์คํํ ํ๋ก๊ทธ๋จ์ ์ค์นํ๊ธฐ ์ํด์ node.js ํ๊ฒฝ ๊ตฌ์ถ์ด ์ ํ๋์ด์ผ ํฉ๋๋ค. node.js์ ์ฌ์ฉํ ์ ์๋ ํ๊ฒฝ์ ๋ง๋ค์๋ค๋ฉด, ํฐ๋ฏธ๋์์ ๋ค์์ ์ฝ๋๋ฅผ ์คํํ์ฌ React Developer Tools๋ฅผ ์ค์นํฉ๋๋ค. ๋ค์์ ์ฝ๋๋ ๋ํ์ ์ธ ํจํค์ง ๊ด๋ฆฌ ๋๊ตฌ์ธ yarn๊ณผ NPM์์ ์ค์นํ๋ ๋ฐฉ๋ฒ์
๋๋ค.
ย
yarn add --dev react-devtools
ย
npx react-devtools
ย
์์ ๊ณผ์ ์ผ๋ก ์ค์นํ ํ ํฐ๋ฏธ๋์ ์๋ ์ฝ๋๋ฅผ ์คํํ๋ค๋ฉด ๊ทธ๋ฆผ 11-3๊ณผ ๊ฐ์ ํ๋ก๊ทธ๋จ ์ฐฝ์ด ์คํ๋ ๊ฒ์
๋๋ค. ๋
๋ฆฝ ์คํํ ํ๋ก๊ทธ๋จ์์๋ React Native, React DOM ๊ทธ๋ฆฌ๊ณ Profiler๋ฅผ ์ด์ฉํ ์ ์์ผ๋, ์ด๋ฒ ์์ ์์๋ React DOM์ ์ด์ฉํ์ฌ ์คํ๋๋ ๊ฒ์ ํ์ธํด๋ณด๊ฒ ์ต๋๋ค.
ย
react-devtools
ย
ย
React DOM์์ ์ ๊ณตํ๋ ๋ ๋งํฌ ์ค ํ๋๋ฅผ ํด๋ฆญํ์ฌ ํด๋ฆฝ๋ณด๋์ ์ ์ฅํฉ๋๋ค. ์ ์ฅ๋ script ํ๊ทธ๋ฅผ ๊ฐ๋ฐ ์ค์ธ index.html ํ์ผ์ head ํ๊ทธ ๋ฐ๋ก ์๋์ ๋ค์ ์ฝ๋๋ฅผ ๋ถ์ฌ์ค๋๋ค.
ย
<!DOCTYPE html> <html lang="ko"> <head> <script src="http://localhost:8097"></script>
ย
์์ ๊ณผ์ ๋๋ก ์งํํ์ฌ ๊ฐ๋ฐ ์ค์ธ ํ์ด์ง๋ฅผ ์คํํ์ ๋, ์ ์์ ์ผ๋ก React Developer Tools์ ์ฐ๊ฒฐ๋ ๊ฒ์
๋๋ค. ์ฃผ์ํด์ผ ํ ์ ์ผ๋ก ์ฌ์ฉ์๊ฐ React Developer Tools์ ์ ๊ทผํ์ง ๋ชปํ๋๋ก ๋ฐฐํฌ ์ ์ ์์์ ์์ฑํ script ํ๊ทธ๋ฅผ ์ญ์ ํด์ผ ํฉ๋๋ค.
ย
11.2.3 React Developer Tools ์ฌ์ฉ๋ฐฉ๋ฒ
ย
React Developer Tools๋ฅผ ํ์ฉํ๋ฉด Component Inspector ๋ด๋ถ์ ์๋ ๋ฐ์ดํฐ์ state๋ props๋ฅผ ์๊ฐํํ ์ ์์ต๋๋ค. Component Inspector๊ฐ ์ ๋ฌํ๋ ๋๋ฒ๊ทธ ์ ๋ณด์์๋ useState๋ useEffect์ ๊ฐ์ ๋ด์ฅ๋ React Hook๋ค์ ๋ํ ์ ๋ณด๋ง ํ์ํ๋ ๊ฒ์ผ๋ก ์ ํํฉ๋๋ค. ๋ํ Hook ๋ ์ด๋ธ์ด ์กด์ฌํ์ง ์์, ํด๋น ์ ๋ณด๋ฅผ ์ดํดํ๋๋ฐ ์ด๋ ค์์ด ์์ ์ ์์ต๋๋ค. ํ์ง๋ง, useDebugValue๋ฅผ ์ฌ์ฉํ๋ค๋ฉด Hook ๋ ์ด๋ธ์ ํตํด ๋ ๋ง์ ์ ๋ณด๋ฅผ ์ ๋ฌํ ์ ์๊ฒ ๋์์ค๋๋ค.
์ค์ ๋ก useDebugValue๋ฅผ ์ด๋ป๊ฒ ์ฌ์ฉํ ์ ์๋์ง ๊ฐ๋จํ ์์ ๋ฅผ ํตํด ์ดํด๋ณด๊ฒ ์ต๋๋ค. ์ด๋ ํ ์ ํ๋ฆฌ์ผ์ด์
์ ์ํ๊ฐ โ์์โ, โ์คํ ์คโ, โ์ข
๋ฃโ์ ์ํ๋ก ํ์ ๋๊ณ , ๋ฒํผ์ ํด๋ฆญ ์ด๋ฒคํธ๋ก ์ธ ๊ฐ์ ์ํ๋ฅผ ์์ฐจ์ ์ผ๋ก ๋ณ๊ฒฝํ๋ ํ๋ก๊ทธ๋จ์ ์์ฑํ๋ค๊ณ ๊ฐ์ ํฉ์๋ค. ์๋์ ์ฝ๋๋ฅผ ์์ฑํ์ฌ React Developer Tools์์ ์ด๋ป๊ฒ ํํํ๋์ง ํ์ธํด๋ณด๊ฒ ์ต๋๋ค.
import React from "react"; import useChangeAppState, { STATE_START, STATE_RUNNING, } from "./hooks/useChangeAppState"; function App() { const [state, next] = useChangeAppState(); const msg = state===STATE_START ? "์ฑ ์์" : state===STATE_RUNNING ? "์ฑ ์คํ ์ค" : "์ฑ ์ข ๋ฃ"; return ( <div> <p>{msg}</p> <button onClick={next}>next</button> </div> ); } export default App;
ย
import { useState, useDebugValue } from "react"; export const STATE_START = 0; export const STATE_RUNNING = 1; export const STATE_STOP = 2; export default function useChangeAppState() { const [state, setState] = useState(STATE_START); const next = () => setState(state === STATE_STOP ? STATE_START : state + 1); useDebugValue( state === STATE_START ? "์ฑ ์์" : state === STATE_RUNNING ? "์ฑ ์คํ ์ค" : "์ฑ ์ข ๋ฃ" ); return [state, next]; }
ย
์์ ์ฝ๋๋ next ๋ฒํผ์ ๋๋ฅผ ๋๋ง๋ค ์ ํ๋ฆฌ์ผ์ด์
์คํ ์ํ๊ฐ ๋ฌ๋ผ์ง๋ ์ฝ๋์
๋๋ค. React Developer Tools์์ ์ ํ๋ฆฌ์ผ์ด์
์คํ ์ํ์ ๋ฐ๋ผ ๋ค๋ฅธ ํ
์คํธ(โ์ฑ ์์โ, โ์ฑ ์คํ ์คโ, โ์ฑ ์ข
๋ฃโ)๊ฐ ํ์๋๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
ย
11.3 ์ปค์คํ ํ ๋๋ฒ๊น ํ๊ธฐ
ย
ํ๋ก๊ทธ๋๋ฐ ์ค ๋ฌธ์ ๊ฐ ์๊ฒจ ๊ฐ์ ํ์ธํด์ผ ํ๋ค๋ฉด console.log๋ฅผ ํตํ์ฌ ๊ฐ์ ๊ฒ์ฆํ๋ ๊ฒ ์ผ๋ฐ์ ์ผ ๊ฒ์
๋๋ค. console.log๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ React์์๋ ์ถฉ๋ถํ ์ข์ ๋ฐฉ๋ฒ์์ ํ๋ฆผ์์ผ๋ ์ปค์คํ
ํ
์ด ์ฌ๋ฌ ๋ฒ ์ฌ์ฉ๋ ๋ ์ฌ์ฉ๋ ์ปดํฌ๋ํธ์์ Hook์ด ๊ฐ์ง๊ณ ์๋ ํ์ฌ ์ํ๋ฅผ ํ์ธํ๊ธฐ ์ด๋ ค์์ง๋๋ค.
ย
์๋ ์์ ๋ ์ฌ๋ฌ ๋ฒ ์ฌ์ฉ๋๋ ์ปค์คํ
ํ
์ผ๋ก ๋ฌธ์ ๊ฐ ์๊ฒผ์ ์ console.log๋ก ๊ฐ์ ์ถ๋ ฅํ ๋ ์๊ธฐ๋ ๋ฌธ์ ์
๋๋ค.
ย
import { useState, useDebugValue } from 'react'; export const STATE_START = 0; export const STATE_RUNNING = 1; export const STATE_STOP = 2; export default function useChangeAppState() { const [state, setState] = useState(STATE_START); const next = () => setState(state === STATE_STOP ? STATE_START : state + 1); console.log( state === STATE_START ? "์ฑ ์์" : state === STATE_RUNNING ? "์ฑ ์คํ ์ค" : "์ฑ ์ข ๋ฃ" ); return [state, next]; }
ย
import React from "react"; import useChangeAppState, { STATE_START, STATE_RUNNING, } from "./hooks/useChangeAppState"; import ItemComponent from "./ItemComponent"; function App() { const [state, next] = useChangeAppState(); const msg = state === STATE_START ? "์ฑ ์์" : state === STATE_RUNNING ? "์ฑ ์คํ ์ค" : "์ฑ ์ข ๋ฃ"; return ( <div> <p>{msg}</p> <button onClick={next}>next</button> <ItemComponent /> <ItemComponent /> {... ์ค๋ต} <ItemComponent /> </div> ); } export default App;
ย
ย
ย
ย
ย
ย
ย
ย
ย
์ ์์ ์์ย next ๋ฒํผ์ย ๋๋ฅธ๋ค๋ฉด ์ํ๊ฐ โ์ฑ ์คํ ์คโ์ผ๋ก ๋ณ๊ฒฝ๋๊ณ ์ํ๊ฐ ๋ณ๊ฒฝ๋๋ฉด์ย ๋ชจ๋ ์ปดํฌ๋ํธ๊ฐย ์ฌย ๋ ๋๋งย ๋ ย ๊ฒ์
๋๋ค. ๋ง์ฝ ์์ ๊ฐ์ด ํด๋นย ์ปค์คํ
ย ํ
์ ์ฌ์ฉํ๋ย ๋ง์ ์ปดํฌ๋ํธ๊ฐย ์๋ค๋ฉด ์ฌย ๋ ๋๋ง ๋ ๋๋ง๋ค ๊ฐ๊ฐ์ console.log๊ฐ ์คํ๋์ด ์ํ๋ย ์ปค์คํ
ํ
์ ํ์ฌ ์ํ๋ฅผ ์ฐพ๊ธฐ ์ด๋ ค์์ง๋๋ค.
ย
์ด๋, useDebugValue๋ฅผ ์ฌ์ฉํ๋ค๋ฉด ์ปค์คํ
ํ
์ ์ฌ์ฉํ๋ ์ปดํฌ๋ํธ๊ฐ ๋์ด๋๋ ํน์ ์ปดํฌ๋ํธ์์ ์ฌ์ฉ๋ ์ปค์คํ
ํ
์ ํ์ฌ ์ํ๋ฅผ ๋ฐ๋ก ํ์ธํ ์ ์์ต๋๋ค.
ย
import { useState, useDebugValue } from 'react'; export const STATE_START = 0; export const STATE_RUNNING = 1; export const STATE_STOP = 2; export default function useChangeAppState() { const [state, setState] = useState(STATE_START); const next = () => setState(state === STATE_STOP ? STATE_START : state + 1); useDebugValue( state === STATE_START ? "์ฑ ์์" : state === STATE_RUNNING ? "์ฑ ์คํ ์ค" : "์ฑ ์ข ๋ฃ", ); return [state, next]; }
ย
ย
์ปค์คํ
ํ
์ ๊ตฌ์กฐ๊ฐ ๋ณต์กํ์ง ์๊ณ ๋จ์ ๊ฐ๋ง ์๊ณ ์ถ๋ค๋ฉด console.log๋ง ์ฌ์ฉํด๋ ๋ ๊ฒ์
๋๋ค. ํ์ง๋ง ๋ณด๋ค ๋ณต์กํ๊ณ ๋ง์ ์์ ์ปค์คํ
ํ
์ ์ฌ์ฉํ๊ฒ ๋์์ ๋, useDebugValue ํ
์ ์ฐ๋ฆฌ์ ํ
์ด ์ด๋ค ์ปดํฌ๋ํธ์์ ์ด๋ค ์ํ์ธ์ง ์กฐ๊ธ ๋ ๋ณด๊ธฐ ์ฝ๊ฒ ์๋ ค์ค ๊ฒ์
๋๋ค.
11.4 useDebugValue ์ฃผ์์ฌํญ & ๊ฐ์ ์ฌํญ
ย
11.4.1 useDebugValue ์ ์ฌ์ฉ์ ์ฃผ์์ฌํญ
ย
useDebugValue ๋ํ Hook์ ๊ท์น์ ๋ฐ๋ฅด๊ธฐ ๋๋ฌธ์, ๋ฐ๋ณต๋ฌธ๊ณผ ์กฐ๊ฑด๋ฌธ, ์ค์ฒฉ๋ ํจ์ ์์์๋ ์ฌ์ฉํ์ง ๋ชปํฉ๋๋ค.
๋ํ, ๊ฐ ์ปดํฌ๋ํธ์ top level์์ ์์ฑํ๋ฉด ์๋ฌด๋ฐ ๋์์ ํ์ง ์์ต๋๋ค. Hook์ ๋ด๋ถ(์ต์๋จ)์์ ์์ฑํด์ผ ๋์ํ๊ฒ ๋ฉ๋๋ค.
ย
function App() { {/* ------------------ */} useDebugValue("test"); {/* ------------------ */} } export default App;
ย
function App() { {/* ------------------ */} const useColorState = () => { useDebugValue("test"); }; useColorState(); {/* ------------------ */} } export default App;
ย
11.4.2 useDebugValue๋ฅผ ๋ ํจ์จ์ ์ผ๋ก ์ฌ์ฉํ๊ธฐ
ย
useDebugValue๋ฅผ ๋ ๊ฐ์ ํ์ฌ์ useState ๊ฐ์ ๋ผ๋ฒจ๊ณผ ๊ฐ๋จํ ์ค๋ช
์ ๋ถ์ฌ์ ๋ณด์ฌ์ค ์ ์์ต๋๋ค.
์๋ ์์ ๋ฅผ ํตํด ์ข ๋ ํฅ์๋ ๋๋ฒ๊น
์ ํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด๊ฒ ์ต๋๋ค.
์๋ ๊ทธ๋ฆผ์ฒ๋ผ ์ธ ๊ฐ์ ๋ฒํผ์ ํตํด, ๋ฐ์ค์ ์์์ ๋ณ๊ฒฝํ ์ ์์ผ๋ฉฐ ์ปค์คํ
๋ ๋๋ฒ๊น
๋ฉ์์ง๋ฅผ ์ถ๋ ฅํ๋ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ง๋ค์ด๋ณด๊ฒ ์ต๋๋ค.
ย
ย
ย
import { useState, useDebugValue } from "react"; const useBoxColorState = (initialValue, message) => { const [value, setValue] = useState(initialValue); useDebugValue(`${message}: ${value}`); return [value, setValue]; }; export default useBoxColorState ;
ย
ํ๋์ ์ปค์คํ
ํ
์ ๋ง๋ค๊ณ , ํ
๋ด๋ถ์์ ๋ฐ์์จ ์ธ์ ๊ฐ์ ์ด๊ธฐ ๊ฐ์ผ๋ก ํ์ฌ state๊ฐ์ ๋ง๋ค์ด์ค๋๋ค.
useDebugValue๋ฅผ ํ
์์์ ์ ์ธํด์ฃผ๊ณ , ์ํ ๊ฐ๊ณผ ์ํ๊ด๋ฆฌ ๊ฐ์ ๋ฐํํ์ฌ ์ค๋๋ค.
์์ฒ๋ผ ์ปค์คํ
ํ
์์ useDebugValue๋ฅผ ์ ์ธํด์ฃผ๋ฉด ํด๋น ํ
์ ํธ์ถํ ๋, ๋๋ฒ๊น
์์ use๋ฅผ ์ ์ธํ
BoxColorState
๋ผ๋ ์ด๋ฆ์ผ๋ก ๋๋ฒ๊น
๋ฉ์์ง๋ฅผ ์ถ๋ ฅํด์ฃผ๊ฒ ๋ฉ๋๋ค.ย
import { useDebugValue, useEffect } from "react"; import { useState } from "react"; import useBoxColorState from "./useBoxColorState.jsx"; import "./style.css"; function App() { const [isColor, setIsColor] = useBoxColorState("", "ํ์ฌ ๋ฐ์ค์์"); const [isTomato, setIsTomdato] = useState(false); const [isPink, setIsPink] = useState(false); const [isSky, setIsSky] = useState(false); useEffect(() => { if (isPink) { setIsColor("pink"); } if (isSky) { setIsColor("sky"); } if (isTomato) { setIsColor("tomato"); } }, [isTomato, isPink, isSky]); return ( <> <button onClick={() => { setIsTomdato(true); setIsPink(false); setIsSky(false); }} > Tomato </button> <button onClick={() => { setIsTomdato(false); setIsPink(true); setIsSky(false); }} > Pink </button> <button onClick={() => { setIsTomdato(false); setIsPink(false); setIsSky(true); }} > Sky </button> <div className={isColor}></div> </> ); } export default App;
ย
์์์ ๋ง๋ useBoxColorState Hook์ ํธ์ถํ์ฌ
isColor
, setIsColor
์ ์ ์ฅํฉ๋๋ค. useState๋ฅผ ๋์ ํ์ฌ ์ฌ์ฉํ๋ค๊ณ ๋ณด๋ฉด ๋ฉ๋๋ค. ์ฒซ ๋ฒ์งธ ํ๋ผ๋ฏธํฐ๋ก๋ ์ด๊ธฐ ๊ฐ์ ๋ฃ๊ณ , ๋ ๋ฒ์งธ ํ๋ผ๋ฏธํฐ๋ก๋ ์ถ๋ ฅํ ๋๋ฒ๊น
๋ฉ์์ง๋ฅผ ๋ฃ์ด์ค๋๋ค.
์ดํ, ๊ฐ ๋ฒํผ์ ํด๋ฆญ์ผ๋ก
isColor
๊ฐ์ด ๋ณ๊ฒฝ๋ ๋๋ง๋ค ๋๋ฒ๊น
๋ฉ์์ง๊ฐ ์์ ๋์ด ์ถ๋ ฅ๋๊ฒ ๋ฉ๋๋ค.ย
.pink { width: 100px; height: 100px; background-color: pink; } .sky { width: 100px; height: 100px; background-color: skyblue; } .tomato { width: 100px; height: 100px; background-color: tomato; }
ย
์์ ์์ ์์ ์ฌ์ฉ๋ CSS ํ์ผ์
๋๋ค.
ย
ย
ย
ย