all is well!!

👀  목표1.원시타입과 참조타입의 개념을 이해하기2.리액트에서 어떤식으로 값과 참조가 쓰이는지 이해하기3.배열 메소드를 적재적소에 잘 사용하기 👀  얕은 비교로 살펴보는 다양한 값 비교🟣 리액트에서의 얕은 비교얕은 비교는 객체의 참조주소만 똑같은지 비교한다.리액트에서 얕은 비교를 사용하는 이유는 상태가 변할때 페이지가 렌더링 되면 다른 상태값들이 일치하는지 체크하는데깊은 비교를 사용하면 안쪽의 depth까지 똑같은지 둘러보고 오기때문에 연산비용이 더 많이든다.그래서 빠르게 처리하기 위해서 리액트에서 렌더링할때 얕은 비교를 사용해서 state의 참조값이 다르면값이 바뀌었구나! 인지하고 재 렌더링 하게된다. 그래서 useState에 값을 변경할때 불변성을 지켜주기 위해 ...을 쓰거나 a.con..

👀  목표1. 컴포넌트가 언제 리렌더링 되는지 살펴보기2. 다양한 훅을 이해하고 사용하기 👀  React의 렌더링 라이프 사이클🟣 1. Trigger단어 그대로 렌더링을 시작하게끔 방아쇠를 당기는 과정. 언제 Trigger가 발동되나요?1. 첫번째 렌더링이 수행될때a. ReactDOM.createRoot(..).render()2. 컴포넌트의 state가 변경될 때a. 클래스 컴포넌트의 setState 메서드b. useState, useReducer등 상태변경 훅의 setter 함수 호출. 1. 렌더링 Batch 처리Trigger 과정에서 여러가지 작업을 한번에 묶어서 수행하는 Batch 기법을 사용한다.function Component() { const [count, setCount] = u..

👀  일급 객체의 조건 1. 런타임에 생성이 가능한 객체 2. 변수나 자료구조에 저장할 수 있는 객체 3. 함수의 매개변수에 전달할 수 있는 객체 4. 함수의 반환값으로 사용할 수 있는 객체 JS는 이 4가지를 모두 만족하기 때문에 일급객체! 👀  일급 객체의 특징 1. 함수가 일급 객체라는것은 함수를 객체와 동일하게 사용할 수 있다는 것. 2. 그래서 객체는 값이기 때문에 함수는 값과 동일하게 취급된다. 3. 함수는 값을 사용할 수 있는 곳이라면 어디든 리터럴로 정의할 수 있고 런타임에 함수 객체로 평가된다. 4. 함수의 매개변수에 전달할 수 있고 함수의 반환값으로도 사용할 수 있다. 5. 일반 객체와의 다른 점은 함수 객체는 호출이 가능하다. 6. 그래서 함수 객체는 함수 고유의 프로퍼티를 소..

👀  var 키워드로 선언한 변수의 문제점 ES6 이전까지는 변수 선언은 var 키워드만 사용했다. 🟣 변수 중복 선언 허용 1. var 키워드로 선언한 변수를 중복 선언하면 초기화문 유무에 따라 다르게 동작. 2. 초기화문이 있는 변수 선언문은 JS엔진에 의해 var 키워드가 없는것처럼 동작. 3. 초기화문이 없는 변수 선언문은 에러는 발생하지 않지만 무시된다. 4. 변수를 중복 선언하면서 값까지 할당하면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 있다. 🟣 함수 레벨 스코프 1. var 키워드의 변수는 오로지 함수의 코드 블록만 지역 스코프로 인정한다. 2. 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다. var x = 1; if(true..

👀  변수의 생명 주기 🟣 지역 변수의 생명 주기 1. 변수는 선언에 의해 생성되고 할당을 통해 값을 갖고 언젠가 소멸하는 생명주기를 가지고 있다. 2. 변수는 자신이 선언된 위치에서 생성되고 소멸한다. 4. 지역변수의 생명 주기 = 함수의 생명주기 🟣 전역 변수의 생명 주기 1. 전역 코드는 명시적인 호출 없이 실행된다. 2. 전역 코드에는 반환문을 사용할 수 없어서 마지막 문이 실행되서 더이상 실행될 문이 없을때 종료된다. 3. 전역변수의 생명 주기 = 애플리케이션의 생명 주기 4. var 키워드로 선언한 전역 변수의 생명주기는 전역 객체의 생명 주기와 일치. 👀  전역 변수의 문제점 1. 암묵적 결합 전역 변수의 선언한 의도는 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합을 허용..

👀  스코프? 1. 스코프는 식별자가 유효한 범위로 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 두개의 변수x는 같은 이름을 가지고 있지만 식별자 결정으로 위치에 따라 참조할 수 있는 유효 범위가 다르다. 맨위의 x는 전역 스코프로 어디서든 참조할 수 있다. 하지만 함수안의 x는 함수 내부에서만 참조할 수 있다. 그래서 함수안의 콘솔x는 local을 반환하고 함수 바깥의 콘솔x는 global을 반환한다. var x= 'global'; function foo(){ var x = 'local'; console.log(x)// 1 } foo(); console.log(x); //2 2. 스코프 내에서 식..

함수형 프로그래밍은 불변성을 지향하는 프로그래밍 패러다임으로 아래 3가지를 목표로 한다. 1. 조건문과 반복문을 제거해 복잡성을 해결하고 변수 사용을 억제 2. 변수 사용을 억제 3. 생명주기를 최소화해서 상태 변경을 피해 오류를 최소화 👀  즉시 실행 함수 1. 즉시 실행 함수는 함수 정의와 동시에 즉시 호출된다. (function (){ var a = 3; var b = 5; return a * b; }()); 2. 단 한번만 호출되고 다시 호출할 수 없다. 3. 익명 함수(이름없는 함수)를 사용하는 것이 일반적이다. 4. 기명 즉시 실행 함수(이름있는 함수)도 사용하능 하지만 그룹 연산자()안의 기명 함수는 함수 리터럴로 평가되고 함수 이름은 함수 몸체에서만 참조할 수 있기 때문에 다시 호출할 수..

👀  프로그래밍 함수? 1. 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것. 2. 입력을 받아서 출력을 내보내는 구조. 매개변수 : 함수 내부로 입력을 전달받는 변수 인수 : 입력 반환값 : 출력 3. 함수는 값이고 여러개 존재할 수 있어서 구별하기 위해 식별자인 함수 이름을 사용한다. 4. 함수 정의를 통해 생성 5. 함수 호출을 통해 인수를 매개변수로 함수에 전달하면서 함수의 실행을 명시적으로 지시해야 한다. //함수 정의 function add(x, y){ return x+y; } //함수 호출 var result = add(2,5); //함수 add에 인수 2, 5를 전달하면서 호출하면 반환값 7을 반환한다. 👀  함수를 사용하는 이유? 1. 몇 번이든 호출..