2022-12-01(목)
🌏TDZ ?
TDZ는 '일시적인 사각지대',
지정되지 않았는데 불러왔을 떄
= 변수에 값이 할당되지 않은 윗 줄 !
(예시)
var로 변수의 초기값을 할당해 주지 않았는데 console.log로 불렀을 때, 오류가 뜨지 않고 undefined가 뜬다.
ㅡㅡㅡ
🐽 추가 팁!
-
undefined : 값이 할당되지 않았음(오류 아님)
-
null : 값을 인위적으로 주지 않은 것. (undefined와의 차이점❗)
위 코드에서 let으로 변수의 초기값을 할당해 주지 않았는데 불렀을 때(TDZ), 오류 사진에서 1번째 줄에 리퍼런스에러가 떴음을 알 수 있다.
🌱 let과 const의 차이점
let은 초기값을 할당하지 않고 초기화만 실행했을 때 undefined로 나오지만
const는 무조건 초기값을 할당해서 선언해 주어야 함 !
👆 위 사진은 const가 초기값이 없는 채 선언되었을 때 나는 오류
🌛 this ?
선택된 바운더리 안에서 '이거'로 해석됨.
let person = {
firstName: "John",
lastName: "Doe",
fullName: function () {
return `${this.firstName} ${this.lastName}`;
// object에서는 키에 대한 값으로 함수를 선언하면
// 함수 내에서 object의 다른 키를 접근할 때는 this 키워드를 사용
// 이 때 this는 object 그 자체(person)가 되기 때문에
// this 키워드를 통해 object에 저장된 데이터에 키로 접근할 수 있게 된다
},
};
console.log(person.fullName());
}
//해석 : this(person)의 firstName, lastName 불러줘!
// return `${person.firstName} ${person.lastName}` 과 동일한 값으로 출력됨.🌕 다음주 배우는 Ledux(리덕스)를 알아보자 !
* Ledux(리덕스)
: 전역으로 상태를 관리할 수 있게 해준다.
react의 장점&단점
리액트로 프로젝트를 진행한다면 App 컴포넌트를 거쳐서 필요한 값을 업데이트하고 리렌더링 하는 방식으로 프로젝트가 개발되는데 위의 구조는 부모 컴포넌트에서 모든 걸 관리하고 아래로 내려주는 것이기 때문에 직관적이고 관리하는 것이 편하다는 '장점'이 있지만 '단점'은 프로젝트의 규모가 커졌을 때 보이는 컴포넌트의 개수가 늘어나면서 다루는 데이터도 늘어나고 그 데이터를 업데이트하는 함수들도 늘어나게 됩니다.
Ledux를 사용하는 이유
리덕스를 사용 시 프로젝트의 규모가 커진다면 상태관리를 컴포넌트 밖에서 할 수 있기 때문에 상태 값을 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 밖에서 관리할 수 있습니다
* Leducer(리듀서)
: 업데이트 로직을 정의하는 함수, 또한 리듀서는 변화를 일으키는 함수라 말할 수 있다.
리듀서 함수는 두 가지의 파라미터를 받는데
state : 현재 상태 / action : 액션 객체
위의 두가지 파라미터를 참조하여 새로운 상태 객체를 만들어 반환합니다!
두가지 파라미터를 참조하여 새로운 상태 객체를 반환하는 방법은
현재의 상태와 전달받은 액션을 참고하여 새로운 상태를 만들어 반환하는 방식입니다.
상태에 변화가 생기면 이전에 컴포넌트가 구독할 때 전달해줬던 함수 리스너가 호출되고
이를 통해 컴포넌트는 새로운 상태를 받고 컴포넌트는 리렌더링을 하게 됩니다.
🤔 오늘 내 느낀점
오늘 리액트 시험이 있었는데 난이도가 생각보다 쉬워서 쉽게 해결했다.
과제가 많이 어려웠는데 과제코드를 해석하려고 노력했었고,
과제코드를 기반으로 만들다보니 쉽게 해결 할 수 있었던 것같은데
분리되었던 Component를 다시 붙이기도 했고 오류 없이
스스로 해결했다는 부분에 성취감을 느꼈다.
한달 반 전까지만 해도 코딩을 한 번도 안해봤던 나로서 한달 반 사이에
잘하지는 못하더라도 많이 늘었다는 생각이 들었다.
다음주부터는 어렵다고들하시는 Ledux(리덕스)가 시작된다.
리듀서는 아직 말로써는 이해하기가 어려운 것 같다..
직접 듣고 코딩해보며 알아가야겠다❗
