๋ฆฌ์กํธ(2)
-
[Props & State] Props & State
Props Props์ ์ ์ - ์ปดํฌ๋ํธ์ ์์ฑ๊ฐ > ๋ถ๋ชจ ์ปดํฌ๋ํธ๋ก๋ถํฐ ์ ๋ฌ๋ฐ์ ๋ฐ์ดํฐ๋ฅผ ์ง๋๊ณ ์๋ ๊ฐ์ฒด - ์ ๋ฌํ๊ณ ์ ํ๋ ์ด๋ค ๊ฐ์ด๋ ์์ ์ปดํฌ๋ํธ์ ์ ๋ฌ๊ฐ๋ฅ > ๋ฌธ์, ์ซ์, ๋ณ์, ํจ์ ๋ฑ State state๋ฅผ ์์ฑํ๊ธฐ ์ํด์๋ useState๋ผ๋ react์ ๋ด์ฅ hook์ ์ฌ์ฉํด์ผํจ import React, { useState } from "react"; const Main = ) => { const [color, setColor] = useState("red"); return ( ์ฌ๊ธฐ๋ ๋ฉ์ธํ์ด์ง์ ๋๋ค. setColor("blue")}>๋ฐฐ๊ฒฝ์ ๋ณ๊ฒฝ ); }; export default Main; ์์ฝ - state๋ ํด๋น ์ปดํฌ๋ํธ๊ฐ UI์ ๋ณด์ฌ์ค ์ ๋ณด๋ฅผ ๊ฒฐ์ ํ ๋ ์ฌ์ฉํ ์ ์๋ ์ํ๊ฐ..
2022.10.10 -
React์ ์ ์์ ํน์ง
React์ ์ ์ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค๊ธฐ ์ํ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ React๋ UI, ์ฆ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๊ตฌ์ถํ๋๋ฐ ์ฌ์ฉํ ์ ์๋ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค. ์ฐ๋ฆฌ๋ ์ด ๋ฆฌ์กํธ๋ฅผ ์ด์ฉํด ์ ์ธ์ ์ด๋ฉด์ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ผ๋ก UI๋ฅผ ํธ๋ฆฌํ๊ฒ ๊ฐ๋ฐํฉ๋๋ค. ์ฌ๊ธฐ์ ์ ์ธ์ ๊ณผ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ด๋ผ๋ ๋จ์ด๋ ๋ฆฌ์กํธ๊ฐ ๊ฐ์ง ํน์ง์ ํํํ๋ ๋จ์ด์ ๋๋ค. ์ปดํฌ๋ํธ ์ปดํฌ๋ํธ์ ์ ์ - ๋ ๋ฆฝ์ ์ด๊ณ , ์ฌ์ฌ์ฉํ ์ ์๋ ์ํํธ์จ์ด ๊ตฌ์ฑ ์์ - ํ๋ก ํธ์๋์์ ์ปดํฌ๋ํธ๋? "๋ ๋ฆฝ์ ์ด๊ณ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ UI ๋จ์" - ์ปดํฌ๋ํธ === ๋ ๊ณ ๋ธ๋ญ - ๋ ๊ณ ๋ธ๋ญ์ ์กฐ๋ฆฝํด์ ํฐ ์ฑ์ ๋ง๋ค๋ฏ์ด, ์์ UI๋ฅผ ์กฐํฉํด์ ํฐ UI๋ฅผ ๊ตฌ์ฑ ์ปดํฌ๋ํธ์ ํน์ง 1. ์ปดํฌ๋ํธ๋ ๋ ๋ฆฝ์ ์ด๊ณ ์ฌ์ฌ์ฉํ ์ ์์ต๋๋ค. -> ์ ์ง๋ณด์์ ์ฉ์ด 2...
2022.10.08