
์ํ์ฝ๋ฉ - React
Egoing Lee
๋ฌด๋ฃ
์ด๊ธ / React
4.9
(473)
๋ฆฌ์กํธ์ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋๋ ๋ฒ๊ณผ ๋ฆฌ์กํธ์ ๋ถ๋ณ์ ๊ด๊ณ๋ฅผ ์์๋ด ๋๋ค.
์ด๊ธ
React
์ํ์ฝ๋ฉ์์ ์ ๊ณตํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ด๋ จ ๊ฐ์๋ก, ์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ณํ๊ฒ ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ์ ๋ํ ์์ ์ ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ณํ๊ฒ ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ
์์ ๋ฐ์ดํฐ ํ์ ๊ณผ ๊ฐ์ฒด์ ๋์๋ฐฉ๋ฒ ๊ฐ์ ์ฐจ์ด
๊ฐ์ฒด๋ฅผ ๋ณต์ ํ๋ ๋ฐฉ๋ฒ
์๋ณธ ๊ฐ์ฒด๋ฅผ ์์ ํ์ง ์๊ณ ๋ณต์ ๋ณธ์ ์์ ํ๋ ๋ฐฉ๋ฒ
์ํ์ฝ๋ฉ์ JavaScript Immutability ์์ ์ ์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ณํ๊ฒ ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ์ ๋ํ ๊ฐ์์ ๋๋ค. JavaScript ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ ์๊ณ ์๋ ํ์ต์๋ฅผ ๋์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ณํ๊ฒ ํ์ฌ ์๋ณธ์ด ํผ์๋๋ ๊ฒ์ ๋ง๋ ๋ฐฉ๋ฒ์ ์ดํด๋ด ๋๋ค.
์ด ๊ฐ์๋ ์๋์ ๊ฐ์ ๋ด์ฉ์ ๋ค๋ฃจ๊ณ ์์ต๋๋ค.
์๋ ๋ด์ฉ์ ๋ค๋ฃจ๊ณ ์์ง ์์ต๋๋ค.
๋ฐ์ดํฐ๋ฅผ ๋ถ๋ณํ๊ฒ ๋ค๋ฃจ๋ฉด ๋ฐ์ดํฐ๋ค๊ฐ์ ๊ฐ์ญ์ผ๋ก ์ธํ ๋ฒ๊ทธ์ ๊ฐ๋ฅ์ฑ์ ํ๊ธฐ์ ์ผ๋ก ๋ฎ์ถ ์ ์์ต๋๋ค. ๋ ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ ๋์๋์ง ์ฌ๋ถ๋ฅผ ๋งค์ฐ ์ฝ๊ฒ ์ฒดํฌํ ์ ์์ต๋๋ค. ๊ทธ ์ธ์ Hot module reloading, time travel๊ณผ ๊ฐ์ ๊ณ ๊ธ ๊ธฐ๋ฒ์ ๊ตฌํํ๋๋ฐ ๊ธฐ์ด๊ฐ ๋๊ธฐ๋ ํฉ๋๋ค.
์๋ ์ฝ๋์ ๊ฒฐ๊ณผ๋ฅผ ๋ชจ๋ ์์ํ ์ ์๋ค๋ฉด ์ด ์์ ์ ๋ฃ์ง ์์๋ ๋ฉ๋๋ค.
var n1 = 1;
var n2 = 1;
console.log(n1 === n2);
=> true์
๋๋ค. ๋น์ฐํฉ๋๋ค.
var o1 = {name:'kim'}
var o2 = {name:'kim'}
console.log(o1 === o2);
=> false ์
๋๋ค. ์กฐ๊ธ ์ ๋งคํ์ฃ . JavaScript๋ ๊ฐ์ด ๋ฐ๋์ง ์๋ ์์ ๋ฐ์ดํฐ ํ์
๊ณผ ๊ฐ์ด ๋ฐ๋ ์ ์๋ ๊ฐ์ฒด๋ฅผ ๋ค๋ฅด๊ฒ ์ทจ๊ธํฉ๋๋ค.
var o1 = {name:'kim'}
var o2 = o1;
o2.name = 'lee';
console.log(o1.name);
=> lee ์
๋๋ค. o1์ ์๋ฌธ๋ ๋ชจ๋ฅด๊ณ ์์ ์ด ๊ฐ๋ฅดํค๊ณ ์๋ name์ ๊ฐ์ด ๋ฐ๋์ด ๋ฒ๋ ธ์ต๋๋ค.
var o1 = {name:'kim'}
var o2 = Object.assign({}, o1); // ๋น ๊ฐ์ฒด์ o1์ ๋ณต์ฌํฉ๋๋ค.
o2.name = 'lee';
console.log(o1.name);
=> kim์
๋๋ค. o2๋ฅผ ๋ณ๊ฒฝํด๋ o1์ด ์ํฅ์ ๋ฐ์ง ์์ต๋๋ค. o2์ ๋ํด์ o1์ ๋ถ๋ณํ ์ํ๋ฅผ ์ ์งํ ์ ์๊ฒ ๋ฉ๋๋ค.
var o1 = {score:[1,2]}
var o2 = Object.assign({}, o1);
o2.score.push(3);
console.log(o1.score)
=> [1,2,3] ์
๋๋ค. ์๋ฌธ๋ ๋ชจ๋ฅด๊ณ o1์ด ๋ ๋ฐ๋์์ต๋๋ค. score๋ ๊ฐ์ฒด์ ์ผ์ข
์ธ ๋ฐฐ์ด์ด๊ธฐ ๋๋ฌธ์
๋๋ค.
var o1 = {score:[1,2]}
var o2 = Object.assign({}, o1);
o2.score = o2.score.concat(); // ๋ฐฐ์ด์ ๋ณต์ฌํฉ๋๋ค.
o2.score.push(3);
console.log(o1.score)
=> [1,2] ์
๋๋ค.
๋ค๋ฅธ ๋ฐฉ๋ฒ๋ ์์ต๋๋ค. ๋ชฝ๋
๋ค ๋ณต์ฌ๋ฅผ ํ๋ ๊ฒ์
๋๋ค.
var o1 = {score:[1,2]}
var o2 = JSON.parse(JSON.stringify(o1));
o2.score.push(3);
console.log(o1.score)
=> [1,2] ์
๋๋ค.
์๋ณธ์ด ๋ฐ๋์ง ์๊ฒ ์กฐ์ฌํ๋ ๊ฒ๋ ์ข์ง๋ง, ์๋ณธ์ด ์์ ์ ๋ฐ๋๊ฒ ํ๋ ๊ฒ๋ ๊ฐ๋ฅํฉ๋๋ค.
var o1 = {name:'kim'}
Object.freeze(o1);
o1.name = 'lee';
console.log(o1.name);
=> 'kim' ์
๋๋ค.
ํ์ง๋ง ๊ฐ์ฒด๋ ์ด๊ฒ ์๋ฉ๋๋ค.
var o1 = {score:[1,2]}
Object.freeze(o1);
o1.score.push(3);
console.log(o1.score);
// [1,2,3] ์
๋๋ค.
๋ฐฉ์ด์ ์ผ๋ก ๋๋์ ํด์ผ ํฉ๋๋ค.
var o1 = {score:[1,2]}
Object.freeze(o1);
Object.freeze(o1.score);
o1.score.push(3);
console.log(o1.score);
// ๋ณ๊ฒฝ์ด ์๋ฉ๋๋ค. ์ฌ์ง์ด ํญ์์ฑ ์๋ฌ๋ฅผ ๋ฐ์์์ผ๋ฒ๋ฆฝ๋๋ค.
์ด ๊ฐ์๋ฅผ ๋ฃ๊ธฐ ์ํด์๋ ์๋์ ๊ฐ์ ์ ํ ์ง์์ด ํ์ํฉ๋๋ค.
(๋ ์ค์ ํ๋๋ฅผ ๊ณต๋ถํ์๋ฉด ๋ฉ๋๋ค.)
์ด 12๊ฐ์ ์์์ผ๋ก ์ด๋ฃจ์ด์ง 1์๊ฐ ๋ถ๋์ ์์ ์ ๋๋ค.
์ด ๊ฐ์๋ CC ๋ผ์ด์ผ์ค๋ฅผ ๋ฐ๋ฅด๊ณ ์์ผ๋ฉฐ, ์๋ ๋งํฌ์์๋ ๋ณผ ์ ์์ต๋๋ค.
https://opentutorials.org/module/4075 ์ข์ ์ง์์ ๊ณต์ ํด์ฃผ์๋ ์ํ์ฝ๋ฉ์ ๊ฐ์ฌ์ ๋ง์์ ์ ํฉ๋๋ค.
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
๋ฐ์ดํฐ๋ฅผ ๋ถ๋ณํ๊ฒ ๋ค๋ค ๋ฒ๊ทธ์ ๊ฐ๋ฅ์ฑ์ ๋ฎ์ถ๊ณ ์ถ์ ๋ถ
๊ณ ๊ธ JS ๊ธฐ๋ฒ์ ๊ตฌํํ๋ ๊ธฐ์ด๋ฅผ ์๊ณ ์ถ์ ๋ถ
์ ์ ์ง์,
ํ์ํ ๊น์?
JavaScript
NodeJS(์ ํ)
297,439
๋ช
์๊ฐ์
7,597
๊ฐ
์๊ฐํ
1
๊ฐ
๋ต๋ณ
4.9
์
๊ฐ์ ํ์
44
๊ฐ
๊ฐ์
์ ์ฒด
12๊ฐ โ (1์๊ฐ 0๋ถ)
์์ ์๊ฐ
05:11
์ด๊ธฐ ๊ฐ์ ๋น๊ต
05:46
๊ฐ์ฒด์ ๊ฐ๋ณ์ฑ
04:07
๊ฐ์ฒด์ ๋ณต์ฌ
04:14
์์ ์ ๋ง์น๋ฉฐ
07:17
์ ์ฒด
93๊ฐ
4.9
93๊ฐ์ ์๊ฐํ
โ
์๊ฐํ 5
โ
ํ๊ท ํ์ 5.0
5
์ด๊ฒ์ ํฌ๋ง์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค!
โ
์๊ฐํ 1
โ
ํ๊ท ํ์ 5.0
5
์ด๊ณ ์ ๋น์ ์...
โ
์๊ฐํ 1
โ
ํ๊ท ํ์ 5.0
5
โ
์๊ฐํ 2
โ
ํ๊ท ํ์ 5.0
5
์ํ์ฝ๋ฉ ์ต๊ณ ์ ๋๋ค.
โ
์๊ฐํ 1
โ
ํ๊ท ํ์ 5.0
5
์ฌ๋ฏธ์๋ ํ์ต์ด ๋์์ต๋๋ค ๊ฐ์ฌํฉ๋๋ค
์ง์๊ณต์ ์๋์ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ง๋๋ณด์ธ์!
๊ฐ์ ๋ถ์ผ์ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ง๋๋ณด์ธ์!
๋ฌด๋ฃ