키워드 : 데이터 타입, 실행 컨텍스트
자바스크립트의 모든 데이터 타입은 참조형 데이터일 수 밖에 없다!
다만 기본형(원시형)은 주솟값을 복사하는 과정이 한 번만 이뤄지고, 참조형(배열,객체 등등)은 한 단계를 더 거치게 된다는 차이가 있다.
- 가변이라는 것은 참조형 데이터 자체를 변경할 경우가 아니라, 그 내부의 프로퍼티를 변경할 때 성립한다.
- 불변 객체 : 값을 전달 받은 객체에 변경을 가하더라도, 원본 객체는 변하지 않아야 하는 경우
var user = {
name : 'Dongchan',
gender : 'male'
};
var changeName = function(user, newName){
return{
name : newName,
gender : user.gender
};
};
var user2 = changeName(user, 'Alex');
if(user !== user2){
console.log('유저의 정보가 변경되었습니다'); // 유저의 정보가 변경되었습니다
}자바스크립트 엔진은 싱글 스레드로 동작한다.
- 이벤트루프만 독립적으로 실행되는 것이 아닌, 브라우저와 같은 멀티 스레드 환경에서 실행됨
-> 런타임은 싱글 스레드가 아니다.
동기식으로 코드 한줄 한줄 실행
-> 앞의 작업시간이 길수록 시간 및 자원의 낭비가 심해짐.
-> setTimeout함수가 실행되면 callstak에 setTimeout함수가 추가된다.
-> wep API가 setTimeout함수를 처리하고 Task Queue로 인자로 받은 callback함수를 전달한다.
-> 이대로 내비둔 채로, 다음 동기줄이 실행된다.
-> 동기줄이 모두 실행되어 callstack이 비워진 걸 확인한 event loop는 task Queue에 있던 callback함수를 call stack으로 옮겨 작업을 수행한다.
비동기 / 동기
- 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기처리 라고 한다.
- 호이스팅( Hoisting )
코드가 실행되기 전임에도 불구하고 자바스크립트 엔진은 이미 해당 환경에 속한 변수명들을 모두 알고 있게되는 셈
이미 선언된 변수는, 비어있는 선언일 경우 무시할 수 있다. - 스코프란 식별자에 대한 유효범위이다.
outer Environment Reference는 연결 리스트의 형태를 띕니다.
또한 각각의 outer Environment Reference는 오직 자신이 선언된 시점의 Lexical Environment만 참조하고 있으므로 가장 가까운 요소부처 차례대로 접근한다. -> 다른 순서로 접근은 불가능하다.
프로미스
비동기 함수인 promise는 함수 내부에서 프로미스를 생성하고 반환한다.
- 성공하면 비동기 처리 결과를 resolve함수에 인수로 전달하면서 호출하고,
- 비동기 처리가 실패하면 에러를 reject함수에 인수를 전달하면서 호출한다.
상태state
1. pending
2. fulfilled
3. rejected
프로미스 후속 처리 메서드
1. promise.then()
2. promise.catch()
3. promise.finally()
setTimeout(()=> console.log(1),0);
Promise.resolve()
.then(()=> console.log(2))
.then(()=> console.log(3))
// 2 -> 3 -> 1프로미스의 후속처리 메서드의 콜백 함수는 태스크 큐가 아니라 마이크로태스크 큐에 저장되기 때문이다.
-> 마이크로테스크 큐는 태스크 큐보다 우선순위가 높다!!!!
async는 그냥 넘겨... 똑같잖아.
React Component
컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.
jsx
- <input type='text'
/>
닫는 태그를 하지 않으면 Error가 나옵니다. - 최상위 태그가 2개면 오류난다. -> 무조건 최상위 '< div >' 로 묶어줘야 한다.
- { } 안에 Javascript 인수들을 넣어서 반환할 수 있다.
props
컴포넌트 간의 데이터 교류 방법
1. props는 반드시 위에서 아래 방향으로 흐른다. 부모 → 자식방향으로만 흐른다(단방향).
2. props는 무조건 읽기 전용으로 취급하며, 변경하지 않는다.
State
State란 UI로의 반영을 위해서 컴포넌트 내부에서 바뀔 수 있는 값을 말한다.
리액트에만 존재하는 개념이자 훅이다.
const [ value, setValue ] = useState( 초기값 )state를 변경할때는 setValue를 이용해서 값을 바꾼다.
데이터의 불변성을 지켜야 하는 이유에 대해
애초에 컴포넌트들이 rerendering되는 조건들이 있는데,
-> state가 변경되었을 때가 그 조건이 된다.
-> 이 말은 즉, memory 주소가 바뀌어야만 한다는 뜻이다.
원시데이터가 아닌 객체나, 배열을 수정할 때에 불변성을 지켜주지 않고, 직접 수정을 하게 되면 주소값은 수정되지 않았기 때문에, 리렌더링이 일어나지 않는 것이다.
해당 값을 console log 찍으면 값 자체는 바뀌어있는 것을 볼 수 있다.
- 단순 변수는 리렌더링시에는 무시한다!
- map, filter, [...syntax] 등의 문법들로 새로운 객체나 배열로 반환하는 것들을 이용해야만 한다.
2월도 끝!
내 인생에서 가장 알찬 2월이였다.
해보자!
