ToDoList3 [React] ContextAPI๋ฅผ ์ฌ์ฉํด์ TodoList๋ง๋ค๊ธฐ(2) : contextAPI contextAPI์ ๋ํด์๋ ์ฑ ๐๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ ๐์์๋ ๋ค๋ค์ง๋ง ๊ฒ์ผ๋ก๋ ์ดํดํ์ง๋ง, ๋ชธ๊ณผ ๋ง์ ์ ์ฒด์ ์ผ๋ก ์์ง ์ดํด๋ฅผ ๋ชปํ๊ณ ๊นจ๋ซ์ง ๋ชปํ๋ค๋ ์๊ฐ์ด ๋ค์ด์ contextAPI๋ฅผ ์ฌ์ฉํ ์์ ์ธ ํฌ๋๋ฆฌ์คํธ๋ฅผ ์ฐพ์์ ๋ค์ํด๋ณด๊ฒ ๋์๋ค. ์ด๋ฒ ํฌ์คํธ๋ฅผ ์ฐ๋ฉด์ ์ ํ ๋ด ๋ชฉํ๋ ์ด ํฌ์คํธ๋ฅผ ์ฐ๋ฉด์ ๋ค ์ฐ๊ณ ๋์๋ ๋ด๊ฐ contextAPI๊ฐ ๋ญ์ง ์ ๋๋ก ์ค๋ช ํ ์ ์๊ณ ์ ์ ์๋๋ก ๋ง๋๋ ๊ฒ์ด๋ค. ์ด์ ํฌ์คํธ๋ ์ด ํฌ๋๋ฆฌ์คํธ๋ฅผ ๋ง๋ค๋ฉด์ ์ฌ์ฉํ styled-components์ ๋ํ ์์๋ค์ ๊ณต๋ถํด๋ณธ ํฌ์คํธ์ด๋ค. minjoo-space.tistory.com/56 [React] ContextAPI๋ฅผ ์ฌ์ฉํด์ TodoList๋ง๋ค๊ธฐ(1) : styled-components ๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ ์์๋ ํฌ๋๋ฆฌ์คํธ๋ฅผ.. 2021. 2. 9. [React] ContextAPI๋ฅผ ์ฌ์ฉํด์ TodoList๋ง๋ค๊ธฐ(1) : styled-components ๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ ์์๋ ํฌ๋๋ฆฌ์คํธ๋ฅผ ๋ง๋๋ ์์ ๋ฅผ ๋ง๋ค์ด๋ดค์๋๋ฐ, ๊ทธ ๋์ ๋ค๋ฅด๊ฒ ์ด๋ฒ์๋ contextAPI๋ฅผ ์ด์ฉํด์ ํฌ๋๋ฆฌ์คํธ๋ฅผ ๋ง๋ค์ด๋ณด์๋ค. ์์ง contextAPI์ ๋ํด์ ๋๊ตฌ์๊ฒ ์ค๋ช ํ ์ ์์๋งํผ ์ ๋ฆฌ๊ฐ ์๋์ด์๋ค๋ ์๊ฐ์ด ๋ค์ด์ ๋ค์ ์๋ก์ด ๋ง์์ผ๋ก ๊ณต๋ถ๋ฅผ ํด๋ดค๋ค. ๊ทธ๋์! ์ด๋ฒ ํฌ์คํธ์์๋ contextAPI์ ๋ํ ๊ฐ๋ ๋ค์ ๋ํด์ ์ค๋ช ํ๊ณ , ํฌ๋๋ฆฌ์คํธ ์ฝ๋๋ฅผ ๋ณด๋ฉด์ ๋ค์ ์ ๋ฆฌํด๋ณผ ์๊ฐ์ด๋ค. contextAPI๋ฅผ ์ฌ์ฉํ ํฌ๋๋ฆฌ์คํธ ์์ ๋ ๋ฒจ๋กํผํธ๋์ ์ด ๊ธ์ ์ฐธ๊ณ ํด์ ์์ฑํ์ต๋๋ค. ๋จผ์ styled-components๋ฅผ ์ฌ์ฉํด์ ํฌ๋๋ฆฌ์คํธ๋ฅผ ๊พธ๋ฉฐ์คฌ๋๋ฐ, ๊ฑฐ๊ธฐ์ ์ฌ์ฉ๋ ์คํ์ผ๋ง์์ ๋ด๊ฐ ์ ๋ชฐ๋๋ ๋ถ๋ถ๋ค์ ๋ํด ์ ์ด๋ณด๋ ค๊ณ ํ๋ค. createGlobalStyle : ์ด ๊ธฐ๋ฅ์ ํ์ด์ง ์ .. 2021. 1. 31. [React] ํฌ๋๋ฆฌ์คํธ ์ปดํฌ๋ํธ ๊ตฌ์กฐ&์ฝ๋ ๋ถ์ ๐๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ ์ ํตํด ๊ณต๋ถํ ๋ด์ฉ์ ๋ฐํ์ผ๋ก ์์ฑํ ํฌ์คํธ์ ๋๋ค.๐ ์ค๋์ ๊ทธ๋์ ๋ฐฐ์ ๋ ์ปดํฌ๋ํธ๋ค์ ์ค์ฌ์ผ๋ก ํ ์ผ์ ์์ฑํ๊ณ ๊ธฐ๋กํ๋ ํฌ๋๋ฆฌ์คํธ๋ฅผ ๋ง๋ค์ด๋ณด์๋ค. ์ฒ์์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํด์ ์์ฑ๋ ํ ํ์ด์ง๋ฅผ ๋ง๋ค์ด๋ณด๋ ๊ฑฐ๋ผ ์์ ๋ฅผ ๋ฐ๋ผํ๋ฉด์๋ ์ปดํฌ๋ํธ๊ฐ์ ๊ตฌ์กฐ์ ์ธ์ธํ๊ฒ ์ฐ์ด๋ ์์ฑ๋ค์ ๊ดํด ๋ ์์ธํ๊ฒ ์๊ณ ์ถ์๋ค. ๊ทธ๋ฆฌ๊ณ , ์ฝ๋๋ฅผ ์์ฑํ๋๋ฐ ์์ด ๊ถ๊ธํ ๋ถ๋ถ๋ค์ด ๋ง์ด ์์ด์ ์ ๋ฆฌํด๋ณด์๋ค. ์ผ๋จ ์ ๋ฆฌํ ๋ถ๋ถ์ ํฌ๋๋ฆฌ์คํธ์ ์ปดํฌ๋ํธ ๊ตฌ์กฐ import cn from {classnames}; ๋ฆฌ์กํธ๋ก ๋ง๋ ํฌ๋๋ฆฌ์คํธ ์ฝ๋ ์๋๋ ์ฝ๋๋ฅผ ๋ค ๋ฐ๋ก ์ฌ๋ฆฌ๋ ค๊ณ ํ์ง๋ง, ๋ง๋ ํ์ผ๋ ๋ง๊ณ ํ๋ค๋ณด๋ ๊ฐ๋ ์ฑ์ด ๋จ์ด์ง ๊ฒ ๊ฐ๋ค๋ ํ๋จํ์ ๊นํ์ ์ฌ๋ฆฌ๋ ๊ฒ ๋ ๋์ ๊ฒ ๊ฐ๋ค. github.com/MinJoo-.. 2021. 1. 11. ์ด์ 1 ๋ค์ ๋ฐ์ํ