4주차가 되었다.
이번 주차에는 리액트의 기본을 배우고 배운것을 토대로 일정을 관리하는 달력을 만드는 프로젝트를 했다. 리액트를 조금 공부했다고 자만했던 나는 초반에 안일하게 프로젝트를 시작을 했고, 그 행동은 엄청난 나비효과가 되서 결국 프로젝트를 완벽하게 수행하지 못한채 제출을 했다. 내 오만을 만회하기 위해 새벽 늦게까지 프로젝트를 붙잡고 있었지만 역부족이었다. 캘린더 뷰를 만드는 것부터 쉽지 않았고, 리액트가 라이브러리라서 그런가(?) 엄청난 자유도가 있기에 가르켜주는 사람마다 다 스타일이 달라 '아 좀 안다!'해도 아는게 아니다 라는 것을 깨달았고, 이것이 뿌리가 탄탄하지 못해서 그런거 같다는 생각이 많이 들었다.
금요일부터 주특기 심화가 시작되었다. 처음 배운다는 마음으로 적극적으로 강의에 임하고있다. 이번 과제는 꼭 완벽히 수행해서 제출할것이다.
Dom은 html 단위 하나하나를 객체로 생각하는 모델
트리구조이다.
Dom트리중 하나가 수정될 때 모든 DOM을 뒤진다음 수정할 것을 찾고, 모두 수정을 하면 불필요한 연산이 많이 일어난다.
그것을 위해 등장한 것이 가상돔이다.
가상돔은 메모리 상에서 돌아가는 가짜 DOM이다
동작방식: 기존DOM과 어떤 행동 후 새로 그린 DOM을 비교해서 바뀐 부분만 갈아끼워주는것(업데이트처리가 간결함)
*DOM을 새로 그릴때
1. 처음 페이지에 진입 했을때
2. 데이터가 변했을때
컴포넌트가 렌더링을 준바하는 순간부터 페이지에서 사라질때까지를 부르는 말
컴포넌트는 생성 -> 수정 -> 소멸 를 거친다.
생성은 처음으로 컴포넌트를 불러오는 것을 말한다.
수정은 유저의 행동으로 데이터가 바뀌거나, 부모컴포넌트가 렌더링 할 때 일어난다.
1. prop가 바뀔 때
2. state가 바뀔 때
3. 부모컴포넌트가 업데이트 됐을때(리렌더링)
4. 강제로 업데이트 했을때(forceUpdate()를 사용하면 강제로 컴포넌트 업데이트 가능)
소멸(제거) 단계는 페이지를 이동하건, 사용자의 행동으로 인해 컴포넌트가 화면에서 사라지는 단계.
constructor()
생성자함수라 불리며, 컴포넌트가 생성되면 가장 먼저 호출된다.
render()
컴포넌트의 모양을 정의한다.
state, props에 접근해서 데이터를 보여줄 수 있다.
여기 안에 들어갈 내용은 컴포넌트 모양에만 관여하는 것이 가장 좋다.
즉 state,props의 내용을 수정하려고 하면 안된다는 뜻
componentDidMount()
컴포넌트가 화면에 나탈때 딱 한 번 실행되는 함수.
컴포넌트라 리렌더링하면 실행되지 않는다.
보통 이 안에서 ajax요청이나 이벤트등록, 함수호출 같은 작업을 한다.
그리고 이미 가상DOM이 실제 DOM으로 올라간 후니까 DOM관련 처리를 해도 된다.
componentDidUpdate(prevProps, prevState, snapshot)
리렌더링을 완료한 후 실행되는 함수
prevProps와 prevState는 중요한 파라미터인데, 각각 업데이트가 되기전의 props, state이다.
이전데이터과 비교할 일이 있다면 쓰자.
여기도 가상DOM이 실제DOM으로 올라간 후니까 DOM관련 처리를해도 괜찮다
componentWillUnmount()
컴포넌트가 DOM에서 제거될 때 실행하는 함수다.
예를들어 스크롤 위치를 추적하거나, 이벤트 리스너를 등록했을 경우 여기서 꼭! 해제를해야한다
Ref
리액트에서 돔요소를 가져오고 싶으면 React.createRef()를 사용해야한다.
서버에서 주는 HTML이 1개뿐인 어플리케이션
전통적인 웹사이트에서는 페이지를 이동할 때마가 html, css, js(정적자원들)을 내려준다면, SPA는 단 한 번만 받아온다.
페이지를 이동 할때마다 서버에서 주는 HTML화면을 다 바꾸다가 보면 상태 유지가 어렵고, 바뀌지 않은 곳까지 굳이 새로 불러와야하니 효율성이 떨어진다.
그러나 처음에 모든 컴포넌트를 불러와야 함으로 첫 로딩속도가 느리다는 단점이 있다.
라우팅
브라우저 주소에 따라 다른 페이지를 보여주는 것
var, let, const로 선언을 할 수있다.
변수를 생성하는 3단계
1. 선언: 실행 컨텍스트에 변수 객체 등록(스코프가 참도하는 대상이 되도록)
2. 초기화: 변수 객체에 등록한 변수를 위해 메모리 공간을 확보한다 (보통 undefined로 초기화됨)
3. 할당: undefined로 초기화된 변수에 실제 값을 할당
var
var로 변수를 선언하면 함수수준의 스코프를 갖는다.
선언과 동시에 초기화를 한다.
재선언이 가능하다
선언하기 전에도 사용이 가능하다(호이스팅)
코드 블럭을 무시한다.
// var name은 함수의 최상위로 호이스팅되기 때문에, 실행될 일 없는 구문 속에 있어도 선언이 됩니다.(자바스크립트가 동작하기 전에 코드를 한 번 훑는데 그 때, var로 선언된 코드를 전부 최상위로 끌어올려버립니다. 동작해선 안되는 구문이라도... 몽땅..!)
function cat(){ name = "perl"; // 이 if문 내로는 절대 들어올 일이 없죠! if(false) { var name; } alert(name); } cat();
let
블록스코프를 갖는다({}안에서 선언을 하면 그 밖에선 사용 불가능)
재선언은 불가능하지만, 재할당은 가능하다
ex)
let dog = ‘숑이’
dog = ‘방구’ //가능
let dog = ‘숑이’
let dog = ‘방구’ //불가능
Uncaught SyntaxError: Identifier 'dog' has already been declared
const
블록스코프를 갖는다.
재선언, 재할당이 불가능하다
선언과 동시에 할당이 되기때문에 값을 안줘도 에러가난다
ex)
const dog = ‘숑이’
dog = ‘방구’ //불가능
VM252:1 Uncaught TypeError: Assignment to constant variable.
const dog = ‘숑이’
const dog = ‘방구’ //불가능
Identifier 'dog' has already been declared
const dog //불가능
Missing initializer in const declaration
var와 let/const의 차이점중의 하나는 변수가 선언되기전에 호출을 하면 ReferenceError가 난다
그 이유는 호이스팅때문
그렇다고 let/const가 호이스팅이 되지 않는것이 아니다.
단지 선언후 초기화 단계에서 메모리에 공간을 확보래야하는데 그 공간을 확보하지 않기때문에 변수를 참조 할 수 없기 때문
use strict
JS는 하위 호완성을 추구(?)하기 땜누에 코드를 읽을때 모던한 방식보단 하위호완에 맞춰 동작한다
따라서 최신기능을 하숑해도 오류가 날 수 있다.
그럴때 ‘use strict;’를 사용하게 되면 모던JS에서 지원하느 모든 기능을 활성화해준다
다양한 타입의 데이터를 담을 수 있다.
key로 구분된 데이터집합, 복잡한 개체를 저장할 수 있다.
key:value로 구성이 된다
객체는 자기가 어디에서 복사가 됐는지 알고있다.
let dog = new Object()
let dog={} //리터럴 방식
*JS의 V8엔진에선 리터럴로 객체를 선언해도 생성자로 변환을 해서 만든다.
이렇게 두 가지 방법으로 선언한다
** const로 선언된 객체는 수정이 가능하다!
const로 선언된 객체는 객체에 대한 참조를 변경하지 못한다는 뜻
ex)
const my_dog = { name: “숑이”, status: “산책가고픔”, }
my_dog.name = “방구”;
console.log(my_dog) // 방구 출력
// 에러. 프로퍼티는 변경이 되지만, 객체 자체를 제할당할 순 없다
my_dog = {name: “방구”, status: “산책가고픔"};
Uncaught TypeError: Assignment to constant variable.
JS는 ()가 있으면 함수를 실행하지만, ()이 없으면 문자형으로 출력한다.
이 것을 이용하면 함수를 복사하거나, 매개변수처럼 전달 할 수 있다.
함수 선언문 vs 함수 표현식
함수 선언문
ex)
function dog(){
console.log(‘이게 함수 선언문 입니다.’)
}
함수 표현식
let dog = function(){
console.log(‘함수 표현식 입니다.’)
}
or
let dog = () =>{
console.log(‘화살표 함수도 함수 표현식 입니다.’)
}// 완전히 일치하지는 않는다.
함수 선언문으로 함수를 생성하면 독립된 구문으로 존재한다
함수 표헌식으로 함수를 선언하면 함수가 표현식의 일부로 존재한다.
함수 선언문은 코드 블록이 실행되기 전에 미리 처리되어서 블록내 어디서든 사용이 가능하다
함수 표현식은 실행 컨텍스트가 표현식에 닿으면 만들어진다.(like 변수)
콜백함수 -> 다시 한 번
함수를 값처럼 전달할 때, 인수로 넘겨주는 함수를 콜백이라고 한다.
인수와 매개변수는 엄연히 다른 개념.
인수는 argument, 매개변수는 parameter라고 한다.
매개변수는 인수를 복사한 값이다.
ex)
const playWithCat = (cat, action) => { action(cat); }
const useBall = (cat) => { alert(cat+"과 공으로 놀아줍니다."); } //playWithCat 함수에 넘겨주는 useBall 함수가 콜백 함수입니다!
playWithCat("perl", useBall);
JS는 클래스가 없다. 클래스가 있긴하지만 ES6부터 지원하는 키워드다.
즉 클래스 기반 언어가 말하는 클래스를 JS가 흉내는 것 뿐
아무튼 JS는 Prototype기반 동적 언어다.
따라서 객체를 생성하는 방법이 타 언어와 다르다.
JS는 객체를 클래스 없이 생성(생성자 혹은 리터럴을 사용해서)한다.
프로토타입을 간단히 설명하자면
JS의 모든 객체는 자신의 부모객체(부모 객체의 원형)와 연결되어있다.
원본이 있고 그것을 복사해서 사용하는것
1. 객체는 함수를 기반으로 해서 만든다 따라서 JS의 모든 함수는 protype을 다 갖고있다. -> 함수의 프로토타입 객체를 복사해서 만든다
2. 객체는 자기가 어디에서 복사가 됐는지 알고있다.