26๋
์ ์ด๋ฉด์ ๋ค๋
์จ ๋ฉด์ ์ด๋ผ๊ณค ์๋ฅด๋ฐ์ดํธ ๋ฉด์ ๋ฟ์ด์๋ ๋์๊ฒ..
๊ฐ๋ฐ์๋ก์จ ์ฒซ ๋ฉด์ ์ ๊ธฐํ๊ฐ ๋ค๊ฐ์๋ค.
100ํ๋ก ์๋ฒฝํ๋๋? ๋ผ๊ณ ๋ฌป๋๋ค๋ฉด ๋ด๊ฐ ๋ชจ๋ฅด๊ณ , ๋ ํท๊ฐ๋ฆฌ๋๊ฒ๋ค๋ ์์๊ธฐ์
๊ทธ๋ ์ง ์์์ง๋ง, ์ต๋ํ ๋
ธ๋ ฅํ๊ณ ์ข์ ๊ฒฐ๊ณผ๋ฅผ ์ป์ ์ ์์๋ค.
์ด๋ ฅ์์ ์์ฑํ ๋ด์ฉ์ ํ ๋๋ก ์ง๋ฌธ์ ์ฃผ์
จ์๋๋ฐ..
50์ ์ง๋ฆฌ ๋ต๋ณ์ด๋ผ๊ณ ํด์ฃผ์
จ๋ค๐๐
์ง๋ฌธ์ ๋จ์ํ์ง๋ง.. ๋จ์ํ ์ง๋ฌธ์๋ ๋๋ต์ ์ ๋๋ก ๋ชป ํ๊ณ ๋๋ฌ๋๋ฌ ์ด์ผ๊ธฐ ํด์..
์์ฌ์ ๋ค.
React์ useState Hook์ ์ฌ์ฉํ๋ค๊ณ ํ๋๋ฐ, Hook์ด ์ด๋ค๊ฑด์ง ์ค๋ช
ํ ์ ์๊ฒ ๋๋๊ณ ์ฌ์ญค๋ณด์
จ๋ค. Functional Component๋ Class Component์๋ ๋ค๋ฅด๊ฒ Life Cycle Method๋ฅผ ์ฌ์ฉํ ์ ์๊ธฐ ๋๋ฌธ์ ๊ทธ ๋์์ผ๋ก ์๊ธด Method์ด๋ค ๋ผ๊ณ ๋ง์๋๋ ธ๋๋ฐ.. 50์ ์ง๋ฆฌ๋ผ๋ ๋ต๋ณ์ ๋ฐ์๋ค^^..
๋ค๋ฅธ ๋ถ๋ค์... ๊ผญ.. ์ค๋น ์ ํด๊ฐ์ธ์ ์ ์ฒ๋ผ 50์ ์ง๋ฆฌ ๋ต๋ณ ํ์ง ๋ง์๊ตฌใ
ใ
ใ
ใ
ํ์ฝ
๋ฉด์ ๋ด์ฃผ์ ๋ถ๊ป์ ์ค์ ๋ก๋ ์ด๋ ฅ์์ ๊ธฐ๋ฐํด ์ง๋ฌธ์ ๋ง์ด ํ๊ฒ ๋๋ค๊ณ ํ์
จ๋ค.
๋ณธ์ธ ์ค์ค๋ก ์์ฑํ ์ด๋ ฅ์์ ๋ํ ๋ด์ฉ์ ๊ผผ๊ผผํ๊ฒ ์ดํดํ๊ณ ์๋ ํธ์ด ์ข์ ๊ฒ ๊ฐ๋ค๋ผ๋ ์๊ฐ์ด ๋ค์๋ค.
๋ด๊ฐ ์์ฑํ ๊ฐ๋
์ด ์ด๋ค ๋ด์ฉ์ธ์ง, ๋ด๊ฐ ์์ฑํ ๊ธฐ์ ์ด ์ด๋ค ๊ธฐ์ ์ธ์ง ๊ผผ๊ผผํ ํ์ธํ๊ธฐ :)
๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ์ ์ด์ , ์ด์ฉ๋ค๊ฐ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๊ฐ ๋๊ธฐ๋ก ํ๋์ง, ๊ทธ๋ฐ ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ๋๊ธฐ์ ๋ํด ์ฌ์ญค๋ณด์
จ์๋ค.
๊ฐ๊ฐ์์ด ์์งํ๊ฒ ๋ง์๋๋ ธ๊ณ , ์ด๋ฐ์ ๋ฐ ์ด์ผ๊ธฐ๋ฅผ ํ๋ค ๊ฐ๋จํ ํด์ฆ ๋ฌธ์ ๋ฅผ ๋ณด์๋ค.
์ฒ์์๋ for๋ฌธ์ด๋ ๋ญ๋ ์ด์ฉํด์ n์ด๋ผ๋ ํจ์๋ถํฐ 1๊น์ง์ ์ดํฉ์ ๊ตฌํ๋ ํจ์๋ฅผ ์์ฑํด๋ณด๋ผ๊ณ ํ์
จ์๋ค. ์ฌ๊ทํจ์์ ์์ ์ด ์์ด์๐ฅ for๋ฌธ์ผ๋ก ์์ฑํ๋ค.
for๋ฌธ์ผ๋ก ์์ฑํ ํจ์๋ฅผ ํจ๊ป ์ฌ๊ทํจ์๋ก ๊ณ ์ณ ์์ฑํ๋๊ฒ๊น์ง ์งํํ๋ค.
map์ ์ฌ์ฉํ ์ ์๋์ง, map์์ ์ฝ๋ฐฑ์ผ๋ก ๋ฐ๋ ํจ์์ ๋งค๊ฐ๋ณ์๋ก๋ ์ด๋ค๊ฒ ๋ฐ์์ง๋์ง ์๋์ง๋ฅผ ๋ณด์ จ์๋ค.
input ๊ฐ์ผ๋ก url์ด ๋ค์ด์์ ๋, ? ๋ค query ๋ถ๋ถ์ ์ชผ๊ฐ์ Object๋ก ๋ง๋๋ ๋ก์ง์ ๊ตฌ์ฑํ๋ ํจ์๋ฅผ ์์ฑํ๋ค. split์ ์ฌ์ฉํ๋๋ฐ split์ ์ฌ์ฉํ๋ฉด ์ ๋๋ ์ด์ ์ ๋ํ ์ค๋ช
์ ๋ค์ ์ ์์๋ค.
split์ ์ฌ์ฉํ๋ฉด 0๋ฒ์งธ ๊ธ์๋ถํฐ ๋๊น์ง ํ์ธ์ ํ๊ธฐ ๋๋ฌธ์, ๋นํจ์จ์ ์ธ ๋ฐฉ๋ฒ์ด๋ผ๊ณ ์ค๋ช
ํด์ฃผ์
จ๋ค.
React์ Functional Component๋ฅผ ์์ฑํ๋ ๋ถ๋ถ์ ๋ณด์ จ๋ค. input๊ฐ์ผ๋ก ์ด๋ค ์ซ์๊ฐ ๋ค์ด์์ ๋, ์์์ ์์ฑํ ์ฌ๊ทํจ์์ ๊ฐ์ ๋ฆฌํดํด์ฃผ๋ ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๋ค. ์๋์ ๊ฐ์ ํ์์ผ๋ก ์์ฑํ๋๋ฐ ๋ ๊ฐ์ง๋ฅผ ์ง์ ๋ฐ์์๋ค.
์ฒซ ๋ฒ์งธ๋ jsx ์์ ์ง์ ํจ์๋ฅผ ์์ฑํ๋ ๊ฒ์ ์ข์ง ์์ผ๋ ์๋ก ๋ณ์๋ฅผ ๋ง๋ค์ด์ ๊ทธ ๋ณ์์์ ๊ฐ์ ๋ฐ์ jsx์ ์์ฑํ๋ ๊ฒ์ด์๋ค.
๋ ๋ฒ์งธ๋ state๋ช
์ ์ง๋ ๊ฒ์ด์๋๋ฐ, ์ด์ฐจํผ input ๊ฐ์ ๋ฐ์ ๋ฆฌํดํ๋ ๋จ์ ๊ธฐ๋ฅ์ ์ปดํฌ๋ํธ์ด๊ธฐ ๋๋ฌธ์ inputNum์ด๋ผ๋ ์ด๋ฆ๋ณด๋ค value๋ผ๋ ์ด๋ฆ์ ์ฌ์ฉํ๋๊ฒ ์ข๊ณ , Handler ๋ณด๋ค๋ state๋ฅผ set ํ๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ setValue ๋ผ๋ ํจ์๋ช
์ ์ฌ์ฉํ๋๊ฒ ์ข์ ๊ฒ์ด๋ผ๊ณ ๋ง์ ์ฃผ์
จ๋ค.
๋ถ๋ช
ํ์ ํ๋ก์ ํธ ํ ๋์๋ setValue์ ๊ฐ์ ํ์์ผ๋ก ์ผ๋๋ฐ.. ์๊ฐ ๊ธด์ฅํด์ Handler๋ก ์ด ๋์์ .. ์ต๊ด์ ๋ค์ด์.
import React,{useState} from "react";
const Hello = () => {
const [inputNum,inputNumHandler] = useState(0);
const recursive = (num) => {
if(num===1) return 1;
return num + recursive(num-1);
}
return (
<>
<input value={value} onChange={(e)=>setValue(e.target.value)}/>
<div>{recursive(value)}</div>
</>
)
}
์ด๋ ฅ์ skill์ ์์ฑํ์ง ์์์ง๋ง, ๊ฐ์ธ์ ์ผ๋ก ๋
ธ๋๋ฅผ ๊ณต๋ถํ๋ ์ค์ด์์ด์ ๋
ธ๋ ๊ด๋ จ ํด์ฆ๋ ๋ฐ์์๋ค. (์ค๋๋ก ํ 4-5์ผ ๊ณต๋ถํ๋ ๊ฒ ๊ฐ๋ค....) express framework๋ฅผ ์ฌ์ฉํด์ get, post์ req๋ฅผ ๋ฐ์์ ๋, req url์์ ์ผ์ ๋ถ๋ถ์ ๋ผ์ด๋ด๋ ๋ก์ง์ ์์ฑํด๋ณด๋ผ ํ์
จ๋ค.
์ผ๋จ req๋ฅผ ๋ฐ๋ ๊ฒ ๊น์ง ์์ฑํ๋๋ฐ, req๋ฅผ ๊ฐ๊ณตํ๋ ๋ฐฉ๋ฒ์ ์์ง ํ์ตํ์ง ๋ชป ํด์๐ฅ ๊ทธ ๋ถ๋ถ์ ํ์ง ๋ชป ํ๋ค. ๊ทธ๋๋.. ์ผ๋จ ์ธ ์ค์ ์๋ค! ๊น์ง๋ ๋ด์ฃผ์ ๊ฒ ๊ฐ๋คใ
ใ
๋ฌธ์ ๋ค์ ์ฒ์์ ๋
ธํธ๋ถ์ผ๋ก ์น์ค๋์? ๋ผ๊ณ ์ฌ์ญค๋ด์ฃผ์
จ๋๋ฐ..
ํ์ดํธ๋ณด๋๊ฐ ๋๋ฌด ๋๊ทผ๋๊ทผ ๊ฑฐ๋ ค์.. ๊ทธ๋ฅ ์์ผ๋ก ํ ์ง์๊ฐ๋ฉฐ ์์ฝ๋ฉ์ผ๋ก ํ์๋ค.
์์ง๋.. ๊ทธ ์์ ์ฐ์ ๋๊ฐ ์ํ์ง ์๋๋ค.
๋ค๋ฅธ๊ฑฐ ๋ค ์ ๋ณด์ด๊ณ ๋ด ์์ ๋์ธ ํ์ดํธ๋ณด๋์ ์ ํ ์ฝ๋๋ง ๋ณด์ผ ๋์ ๊ธฐ๋ถ์ด๋๐๐
์์ ์ ํผ๋ธ๋ฆฌ์ฑ์ ์ฒ์ ๋ฐฐ์ธ ๋๊ฐ ์๊ฐ๋๋ค.
๋จ๋ค์ ๋นํด์ ์ ์ฉ์ํค๊ณ ์ดํดํ๋๊ฒ ๋๋ฌด ๋๋ ค์, ์ด๋ ๊ฒ ํ๋ค๊ฐ๋ ํฌํด์ด๊ณ ๋ญ๊ณ ์๋ฌด๊ฒ๋ ๋ชป ํ๊ฒ ๋ค ์ถ์ ๋ง์์..
๋
ธํธ์ ํ๊ทธ๋ค์ ํ๋ํ๋ ์ ์ด๊ฐ๋ฉด์ ์ธ์ฐ๋ ค๊ณ ํ๊ณ , outline ํ๋ํ๋ ๊ทธ๋ ค๊ฐ๋ฉฐ ์ด๊ฒ ์ ์ด๋ ๊ฒ ๋๋์ง ๋์์์ด ์ดํดํ๋ ค๊ณ ๋
ธ๋ ฅํ๋ ๊ทธ๊ฐ์ ๊ธฐ๊ฐ๋ค.
ํผ์ ๊ฐ์๋ฅผ ๋ค์ด๊ฐ๋ฉฐ ์ค์ค๋ก์ ์ดํด๋ ฅ์ ๋๋ฌผ์ง๋ ๋ ๋ค, ๊ทธ๋ฆฌ๊ณ ํ ๋ฒ ๋ณด๊ณ ๊ฐ์ผ๋๊น ์ ํด์ผํ๋ค๋ ๋ถ๋ด๊ฐ์ ์์นจ ์งํ์ฒ ์์ ํธ๋ํฐ์ผ๋ก ๊ฐ์๋ฅผ ๋ค์ด๊ฐ๋ฉฐ ํ๋ฃจ๋ฅผ ์์ํ๋ ๋ ๋ค.
์ฌ ํด 1์๋ถํฐ 6์๊น์ง ๊ตญ๋นํ์์์ ํผ๋ธ๋ฆฌ์ฑ ๊ณผ์ ์ผ๋ก ์์ํด์, 9์๋ถํฐ 12์๊น์ง ์์ง ์ข ๋ฃ๋์ง ์์ ์์ฝ๋ ๊ธฐ๊ฐ, ๊ทธ๋ฆฌ๊ณ ๋ฉด์ ์ ๋ณด๊ณ ์ต์ข ์ ์ผ๋ก ๋ฉ์ผ์ ๋ฐ๊ธฐ๊น์ง์ ๊ธฐ๊ฐ๋ค.
๊ทธ๋ฆฌ๊ณ , ์์ผ๋ก ๋์ธ 3๊ฐ์๊ณผ ๊ทธ ์ด์์ ๊ธฐ๊ฐ๋ค.
์์ฒญ ๋ฐ์๊ณ ์ ์ ์๋ 3๊ฐ์์ด ๋ ๊ฒ ๊ฐ์ง๋ง, ๋ฌด์ธ๊ฐ๋ฅผ ๋ฐฐ์ฐ๊ฒ ๋ ๊ฒ์ด๋ผ๋ ๊ธฐ๋๊ฐ์ด ์์ง๊น์ง๋ ๋ ํฌ๋ค.๐คฃ๐คฃ
์ค์ค๋ก ์ ํ์ ์ง์น์ง ์๊ธฐ๋ฅผ ๋น๊ณ ์๋ค. ์คํธ๋ ์ค ๊ด๋ฆฌ ์ ํ๊ณ , ์ฒด๋ ฅ ๊ด๋ฆฌ๋ ์ ํ๊ธฐ.
๋ฉด์ ๋น์ผ ๋ ๋ฐ ํ์ ์ ๊ฒฐ๊ณผ๋ฅผ ๋ฃ๊ณ , ๊ณผ์ ๋ ๋ฐ์์ง๋ง..
์ง์ง ์ ์์ผ๋ก ๋ต์ ๋ฐ๊ธฐ ์ ๊น์ง๋ ํ์คํ์ง ์๋ค๊ณ ์๊ฐํ๊ธฐ ๋๋ฌธ์ ๋ฐ๋ก ๋ง์ ์ ๊บผ๋ด๋ ์ค์ด๊ธฐ๋ ํ๊ณ , ์ค์ค๋ก๋ ์์ง ํ ์๋ฟ๋๊ฒ ์์ด์(์๋ง ์งํ์ฒ ํ๊ณ ๊นจ๋ซ๊ฒ ์ง) ๋ด๊ฐ ์ง์ง ํ์ฌ์ ๊ฐ๋ค!! ๋ผ๋๊ฒ ์ด์ง ์ด์์ด์ํ๋ค.
๊ทธ๋๋ ์ข์ ๊ธฐํ๊ฐ ์ฐพ์์จ ๋งํผ ์ต์ ์ ๋คํด ์ด์ฌํ ํ ๊ฒ์ด๊ณ , ์ต์ ์ ๋คํด์ ๋ด ์ค์ค๋ก์ ๊ฐ์น๋ฅผ ๋น๋ด๊ธฐ ์ํด ๋
ธ๋ ฅ ํ ๊ฒ์ด๋ค.
ํจ๊ป์ ๊ฐ์น๋ ๋ด ๊ฐ์น๊ฐ ๋น๋ ๋ ์๋ ๊ฒ์ด๊ธฐ์ :)
์ถํํฉ๋๋ค ํ์ ๋~~ ์์ผ๋ก๋ ์ญ ๋ฉ์ง ๊ฐ๋ฐ์๋ก ์ฑ์ฅํด ๋๊ฐ๊ธธ! ์์ํ ๊ฒ์!
์์ผ๋ก ๋~ ๋ฐ์ง๋ฐ์งํ๊ฒ ๋น๋ ์ฐ๋ฆฌ ํ์ ๋์ ์๋ ์ ์์ํฉ๋๋ค! ฯ(._. )>