React์ ์๋ก์ด ๋ฒ์ ์ธ v17์ ๋ํ ์์์ ํจ๊ป ์์๋ณด๋ ค๊ณ ํฉ๋๋ค. React ํ์ ์๋ก์ด ์ ๋ฐ์ดํธ๋ฅผ ํตํด ๊ฐ๋ฐ์๋ค์๊ฒ ๋ ๋์ ๊ฒฝํ์ ์ ๊ณตํ๊ณ ์ ๋ ธ๋ ฅํ๊ณ ์์ต๋๋ค.
1. ๋ฆฌ์กํธ v17 ์๊ฐ
React v17์ ์ด๋ฒ ์ ๋ฐ์ดํธ์์ ์ฃผ๋ชฉํ ๋งํ ๋ช ๊ฐ์ง ๋ณํ๊ฐ ์์ต๋๋ค. ์ฝ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ฃผ์ ๊ธฐ๋ฅ๋ค์ ๋ํ ๊ฐ๋จํ ์๊ฐ๋ถํฐ ์์ํ๊ฒ ์ต๋๋ค.
React v17์ ๊ธฐ์กด์ ์ฃผ์ ๋ณํ ์์ด๋ ์๋ก์ด API ์ถ๊ฐ์ ํจ๊ป ์์ ์ฑ๊ณผ ์ฑ๋ฅ ํฅ์์ ์ค์ ์ผ๋ก ๋๊ณ ์์ต๋๋ค. ์๋ก์ด ๋ฒ์ ์ ์ด์ ๊ณผ์ ํ์ ํธํ์ฑ์ ์ ์งํ๋ฉด์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ทธ๋ ์ด๋๋ฅผ ์ฝ๊ฒ ๋ง๋ค์ด์ค๋๋ค.
2. ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ทธ๋ ์ด๋ ๊ฐ์ด๋
๊ธฐ์กด์ React ์ ํ๋ฆฌ์ผ์ด์ ์ v17๋ก ์ ๊ทธ๋ ์ด๋ํ๋ ๊ณผ์ ์ ๋ํด์ ์์๋ด ์๋ค. ์ ๊ทธ๋ ์ด๋ ๊ณผ์ ์์ ์ฃผ์ํด์ผ ํ ์ ๊ณผ ์ฃผ์ ๋ณ๊ฒฝ์ฌํญ์ ๋ํ ์๋ด๊ฐ ํ์ํฉ๋๋ค.
ํจํค์ง ์ ๋ฐ์ดํธ
๋จผ์ , React ๋ฐ ๊ด๋ จ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ต์ ๋ฒ์ ์ผ๋ก ์ ๋ฐ์ดํธํด์ฃผ์ธ์. npm์ด๋ yarn๊ณผ ๊ฐ์ ํจํค์ง ๋งค๋์ ๋ฅผ ์ฌ์ฉํ์ฌ ์์ฝ๊ฒ ์ ๋ฐ์ดํธํ ์ ์์ต๋๋ค.
npm install react@latest react-dom@latest
์ฝ๋ ์์
React v17์ ๊ธฐ์กด ์ฝ๋์ ํฐ ์์ ์ด ํ์ํ์ง ์์ต๋๋ค. ๊ทธ๋ฌ๋ ๋ ๊ฑฐ์ ์๋ช ์ฃผ๊ธฐ ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ, ์๋ก์ด ๋ฆด๋ฆฌ์ฆ์ ๋ฐ๋ผ ์ฝ๋๋ฅผ ์ดํด๋ณด๊ณ ์ ๋ฐ์ดํธํด์ผ ํ ์๋ ์์ต๋๋ค.
3. ์๋ก์ด ๊ธฐ๋ฅ๊ณผ ๊ฐ์ ๋ ์ฑ๋ฅ
์ด๋ฒ ์ ๋ฐ์ดํธ์์๋ ๋ช ๊ฐ์ง ์๋ก์ด ๊ธฐ๋ฅ๊ณผ ๊ฐ์ ๋ ์ฑ๋ฅ์ด ๋์ ๋์์ต๋๋ค. ์ด๋ก ์ธํด ์ด๋ค ์ํฉ์์ ์ด์ ์ ์ป์ ์ ์๋์ง ์ดํด๋ณด๊ฒ ์ต๋๋ค.
์๋ก์ด Context API
React v17์์๋ Context API๊ฐ ๋์ฑ ํฅ์๋์์ต๋๋ค. ๋ ์ฌ์ด ์ฌ์ฉ๋ฒ๊ณผ ํจ๊ป, ์ฑ๋ฅ ๋ฉด์์๋ ์ด์ ๋ณด๋ค ํฅ์๋ ๋ถ๋ถ์ด ์์ต๋๋ค.
๋ ๊ฑฐ์ ๋ชจ๋์ ๊ฐ์
๋ ๊ฑฐ์ ๋ชจ๋์์๋ ์ฑ๋ฅ์ด ํฅ์๋์์ต๋๋ค. ์ด๋ก์จ ์ด์ ๋ฒ์ ์์ ๋ฐ์ํ๋ ๋ช ๊ฐ์ง ์ฑ๋ฅ ์ด์๊ฐ ๊ฐ์ ๋์์ต๋๋ค.
4. ์ํ ์ฝ๋์ ์์
์ด์ ์๋ก์ด ๊ธฐ๋ฅ์ ์ค์ ๋ก ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด๊ฒ ์ต๋๋ค. ์๋๋ ๊ฐ๋จํ ์์ ์ฝ๋์ ๋๋ค.
// ์๋ก์ด Context API ์ฌ์ฉ ์์
const MyContext = React.createContext();
function MyComponent() {
return (
<MyContext.Provider value="Hello, React v17!">
<ChildComponent />
</MyContext.Provider>
);
}
function ChildComponent() {
const contextValue = React.useContext(MyContext);
return <div>{contextValue}</div>;
}
5. ์ปค๋ฎค๋ํฐ ๋ฐ์๊ณผ ํฅํ ์ ๋ง
๋ง์ง๋ง์ผ๋ก, ๊ฐ๋ฐ์๋ค์ ๋ฆฌ์กํธ v17์ ๋ํ ๋ฐ์๊ณผ ํผ๋๋ฐฑ์ ๋ํด ์์๋ณด๊ฒ ์ต๋๋ค. ์์ ๋ฏธ๋์ด๋ ๊ฐ๋ฐ์ ์ปค๋ฎค๋ํฐ์์ ์ด๋ค ์๊ฒฌ๋ค์ด ๋์ค๊ณ ์๋์ง ์ฃผ์ํ๋ฉด์, ์์ผ๋ก์ ๋ฒ์ ์์ ์์๋๋ ํฅํ ๋ณํ์ ๋ํ ์ ๋ง์ ์ดํด๋ด ์๋ค.
์ด์์ผ๋ก React v17์ ๋ํ ์์๊ณผ ์ฃผ์ ์ ๋ฐ์ดํธ์ ๋ํ ๋ด์ฉ์ ์ ๋ฆฌํด๋ณด์์ต๋๋ค. ์๋ก์ด ๋ฒ์ ์ ํตํด ๋ ๋์ React ๊ฒฝํ์ ์ฆ๊ธฐ์๊ธธ ๋ฐ๋ผ๋ฉฐ, ์ ๋ฐ์ดํธ์ ๋ฐ๋ฅธ ์ด๋ ค์์ด๋ ๊ถ๊ธํ ์ ์ด ์์ผ๋ฉด ์ธ์ ๋ ๋๊ธ๋ก ๋จ๊ฒจ์ฃผ์ธ์!
'Develop > It ์ด๊ฒ์ ๊ฒ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
ํด๋ผ์ฐ๋ ๋ค์ดํฐ๋ธ ๊ธฐ์ : ๊ฐ๋ ๊ณผ ํ์ฉ (0) | 2024.02.01 |
---|---|
bower ์ค์นํ๋ ๋ฒ (bower install) (0) | 2024.01.31 |
์ฌ์ด๋ฒ ๋ณด์๊ณผ ๊ฐ์ธ ์ ๋ณด ๋ณดํธ: ํ์ฌ ํธ๋ ๋์ ๋ฏธ๋ ์ ๋ง (0) | 2024.01.29 |
๋ก๋ด๊ณตํ ๋ฐ ์๋ํ ๊ธฐ์ : ํ์ฌ ํธ๋ ๋์ ๋ฏธ๋ ์ ๋ง (0) | 2024.01.26 |
Angular js ํ๋ก์ ํธ ์์ฑํ๋ ๋ฐฉ๋ฒ (0) | 2024.01.25 |
๋๊ธ