2022-11-30 (수)
🥨 [JS] 데이터 바인딩 이해하기(단방향, 양방향 데이터 바인딩)
1) 데이터 바인딩(Data Binding)이란?
💡 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미합니다.
💡 예를 들어서 HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주고 있다고 가정을 했을 때, 해당 값이 변경이 될 경우 다시 HTML 상에 데이터(값)를 변경된 값에 따라서 맞추어 주는 동작을 '데이터 바인딩'이라고 합니다.
2) 단방향 데이터 바인딩(One-way Data Binding)이란?
💡 컴포넌트 내에서 '단방향 데이터 바인딩'은 Javascript(Model)에서 HTML(View)로 한 방향으로만 데이터를 동기화하는 것을 의미합니다. [JS(Model) -> HTML(View)]
💡 단방향 데이터 바인딩이기에 역으로 HTML(View)에서 JS(Model)로의 직접적인 데이터 갱신은 불가능합니다. '이벤트 함수(onClick, onChange,...)'를 주고 함수를 호출한 뒤 Javascript에서 HTML로 데이터를 변경해야 합니다. [HTML(View) -> JS(Model)]
💡 컴포넌트 간에서 단방향 데이터 바인딩은 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 전달되는 구조입니다.
💡 대표적으로 SPA Framework에서는 React에서 단방향 데이터 바인딩을 합니다.
3) 양방향 데이터 바인딩(Two-way Data Binding)이란?
💡 컴포넌트 내에서 '양방향 데이터 바인딩'은 Javascript(Model)와 HTML(View) 사이에 ViewModel이 존재하여 하나로 묶여서(Binding) 되어서 둘 중 하나만 변경되어도 함께 변경되는 것을 의미합니다. [HTML(View) <-> ViewModel <-> Javascript(Model)]
💡 컴포넌트 간에서는 부모 컴포넌트에서 자식 컴포넌트로는 Props를 통해 데이터를 전달하고, 자식 컴포넌트에서 부모 컴포넌트로는 Emit Event를 통해서 데이터를 전달하는 구조입니다.
💡 대표적으로 SPA Framework에서는 Vue.js, Angular에서 양방향 데이터 바인딩을 합니다.
🍄 .map()과 ,filter() 메소드의 차이
🍒 ES6 문법
:(자바스크립트 문법을 축약해서 간단하게 쓸 수 있게 한다.)
🍥 Var 문제점
- 호이스팅
- 함수 스코프(변수의 유효 범위)
- 재선언과 재할당 모두 가능하다(자유롭지만 코드가 꼬일 수 있음)
🍥 let과 const
- 호이스팅은 일어니지만 TDZ(Temporal Dead Zone)
- let(재선언은 X, 재할당은 O)과 const(둘 다 불가능)
- 블록 스코프 (if, while, fucntion, switch-{})
🍥 Spread Operator
전개연산자
언제?
1. 배열, 객체등을 복사
2. 배열 객체 등을 병합
3. 전개 연산이 필요할 때(Math.max)
let arr=[20,10,30,50,40]
const maxNum=Math.max(...arr)
console.log(maxNum)
->50🍥 Template Literals
const name = 'heesung'
var a = 5;
var b = 10;
console.log (`Fifteen is ${a+b}and
net ${2*a+b}
`);
- 띄어쓰기도 먹힘 !
🍥 화살표 함수
일반함수 형태:
const a = function(){};화살표함수 형태:
const a=()=>{};왜 사용하는가?
1. 보기 쉽다.
2. 가볍다 / this binding
- 보기 쉽다.
var a = function(){
return new Date();
}
같은 코드
var a=()=>new Date();var c = function (a,b){
return a+b
};
같은코드
var c=(a,b) => a+b;call(function() {
console.log('hi')
});
같은 코드
call(()=>console.log('hi'))- 가볍다.
const user={
name:'heesung'
sayMyName:function(){
console.log(this.name);
},
}
user.sayMyName();개발자 도구로 위 코드를 치면 들어있는 내용들이 많아 무겁다.
const user = {
name:'heesung'
sayMyName:()=>{
console.log(this);
}
}화살표 함수로 보면 가볍다
🍥 구조분해할당
2개일 때 값을 서로 바꿔주기
var a = 10;
var b = 20;
[a,b]=[b,a]🍥 배열메소드
let number = [1,2,3,4] 를 예시로 들면
for(i=0;i<number.length;i++){
numbers[i]*=2;
}
같은 코드
const newNumbers=number.map((item)=>{
return item*2
})const odd=[]
for(i=0;i<number.length;i++){
if(numbers[i]%2!==0){
odd.push(numbers[i])
};
}
같은 코드
const odd=numbers.filter((item)=>item%2!==0)
- 맵과 필터를 같이 쓴다면?
const newNumbers = numbers
.filter((item)=>item%2!==0)
.map((item)=>item*2)
const sum=numvers.reduce((a,c,i)=>{
c=
i=
const newSum = a+c
return newSum
},0)
를 화살표 함수로 하면
const sum=numbers.reduce((a,c)=>a+c,0);🌕 오늘 알게 된 간단한 팁
- 나머지 매개변수는 나머지이기 때문에 앞 배열에 넣을 수 없음
function foo (a, ...rest){
}🍕 아직 내가 잘 모르겠는 것들
- TDZ가 아직 뭔지 모르겠다. 찾아보기 !
-
ProtoType 찾아보기 !
ProtoType(프로토타입)?
JavaScript의 모든 객체(배열, 객체, 함수 등)는 상위 객체를 참조하며, 이 상위 객체를 프로토타입이라고 말합니다. -
this의 개념..찾아보기 !(매니저님도 어려운 개념이라 나중에 봐도 된다고 하심!)
- Scope의 정확한 뜻 찾아보기 !
Scop(스코프)?
변수에 접근할 수 있는 범위, 식별자(변수)를 찾기위한 규칙.
var x = 'global';
function foo () {
var x = 'function scope';
console.log(x);
}
foo(); // ?
console.log(x); // ?위 예제에서 x가 두번 선언되었는데, JavaScript는 각 x가 어떤 값을 가지는지 어떻게 구별할 수 있을까?
위 예제에서 전역에 선언된 변수 x는 어디에든 참조할 수 있다. 하지만 함수 foo 내에서 선언된 변수 x는 함수 foo 내부에서만 참조할 수 있고, 외부에서는 참조할 수 없다.
이러한 규칙을 스코프 라고 한다.
- 블록 스코프? 찾아보기 !
전역변수?
코드에서 함수 밖에 있는 애들 (ex.useState, 함수 밖에 const name='nana' 이것도 전역변수가 될 수 있음)
지역변수 ?
함수 본체 내부에 있는 애들 (함수 안에..const name = 'nana'를 안에 쓰면 지역변수)
함수 레벨 스코프(var)
'var'는 함수내에 잇는것만 지역변수로 인정해서 함수 바깥에는 모두 전역변수로 인정하며 다른거로 묶어놔도 전역변수로 한다.
블록 레벨 스코프(let, const)
'let', 'const'는 {}묶어진 애들은 지역변수와 전역변수를 또렷히 나눔
