오늘의 결론
- React 주특기 심화 1주차
오늘 배운 것
(1-3강)
-
호이스팅 : 선언을 문서 맨위로 끌어 올림
-
실행 컨텍스트 : 파일을 쭉 한번 훑어 보고 실행 환경 미리 준비하는 것
변수를 만들면 자바스크립트엔진이 변수를 쓰기 위해서 실행 컨텍스트에 변수를 등록을 한다.
선언, 초기화(메모리에 공간확보), 할당(공간에 값을 넣어주는것)을 거쳐 등록한다. -
TDZ (Temporal Dead Zone)
- var와 달리 let과 const는 변수를 선언전에 호출하면 ReferenceError가 난다.
- var는 변수를 선언과 동시에 초기화하기 떄문이다.
- let 과 const도 호이스팅이 되지만 선언만 될 뿐 초기화는 해당 코드 줄에 도착해야 되기 때문에 TDZ가 발생하는 것이다.
- var쓰지말자.
- 자료형 : 객체를 뺴고 나머지 7개는 원시형
(1-4강)
- 객체형 : 여러타입의 데이터 담을 수 있다. 객체안에 키:값 쌍을 프로퍼티 라고한다.
- 객체 생성 방법은 2가지가 있다.
1. let cat = New Object(); -> 객체 생성자
2 let cat = { } -> 리터럴
사실 엔진 입장에서는 리터럴 사용법도 생성자 사용해서 사용한 것으로 본다. - 객체의 프로퍼티(속성)은 보호되지 않는다.
프로퍼티가 보호되지 않는다는 것은 원시형 데이터와 객체형 데이터가 메모리에 저장되는 방식의 차이 때문에다.
우선 원시형 같은경우는 메모리에 데이터 값 자체가 저장 되지만, 객체형은 데이터 값이 메모리의 별도 공간에 저장되고 이 별도공간의 주소가 메모리에 들어간다.
별도공간의 주소가 메모리에 들어가는 것을 "객체에 대한 참조가 들어간다고 표현한다."
결론은 객체안에 있는 데이터 값이 변해도 주소는 안변하니까 수정이 가능하다.
(1-5강)
- 함수는 동작을 하는 값이다.
- 함수 생성방식
1. 함수선언문은 독립된 구문으로 존재, 바로 초기화된다. (아래쪽에 선언해도 위에서 쓸 수 있다는것)
-
함수표현식은 표현식의 일부로 존재, 바로 초기화 되지 않는다.
표현식 둘은 약간 다르다. 그 이유는 화살표함수는 생성자, 제너레이터로 못쓴다.
ex) 함수표현식에서는 this는 함수 그 자체인데 화살표 함수에서는 위쪽에 있는 부모를 불러온다.
-
생성자를 이용하는 방법 new Function() 쓰지말자
-
- 함수는 자기가 태어난 환경을 프로퍼티(Environment)에 저장한다. = 함수는 프로퍼티에 자기가 만들어질 당시의 렉시컬 환경을 참조한다. (기냥 그런가보다 하자)
-
지역변수와 외부변수, 내부변수와 외부변수 (변수명이 같으면 내부변수 갖다씀)
https://www.notion.so/1-61b801640d354b3fb06b174d66e8a888 참고 -
콜백함수(모르겠다)
매개변수(parameter) : 인수를 복사한 값 이다. 함수내에서 쓰고버린다.
인수(argument) :
(1-6강)
- Prototype(모르겠다)
자바스크립트에서 객체는 함수를 사용해서 만드는데, 정확하게는 객체는 함수의 원형 = 프로토타입(부모객체,프로토타입객체)를 복사해서 객체를 만듬,내가 어디서 복제되었는지 기억하고있다.
자바스크립트가 객체를 어떻게든 저렴하게 리소스낭비없이 생성하기위한 노력
(1-7강,1-8강)
- 프로젝트 셋팅
컴포넌트 나눌 때, 기획서 볼 때 데이터가 어떤게 들어갈지 생각해보기
(1-9강)
- 메인 페이지(포스트 목록) 만들기
- Page컴포넌트(Postlist) 제작 후 App.js에서 react-router-dom설치 후
import {BrowserRouter, Route} from "react-router-dom" 후
component 속성으로 router로 잡아줬다. - 그리고 Postlist를 hearder컴포넌트랑 Post컴포넌트로 쪼개서 불러다가 쓰기로했다.
먼저 Post컴포넌트에서는 와이어프레임을 보고 대략적으로 들어가야할 부분을 정리해놨다.
그리고 정리해 놓은 부분을 토대로 어떤데이터가 들어갈지 생각해 본다.
일단 데이터를 Postlist에서 props로 넘겨 받는데
데이터가 없을 때 오류가나거나 페이지가 깨지는걸 방지하기위해 defaultProps를 넣어줬다.
Post컴포넌트에서 console로 Props찍어보면 Postlist에서 넘겨준 데이터가 없는데도 잘 찍힌다.
(1-10강)
Post컴포넌트에 대략적으로 들어가야할 부분을 보면서 다시 최소단위 컴포넌트도 제작 해보자.
일단 Grid를 잡을껀데 전체적인 스타일을 주는거라 보면된다. 와이어 프레임을 보고 어떤 속성들이 쓰일지 생각해보자. 일단 Grid컴포넌트를 만들고 styled컴포넌트를 import해준다.
와이어 프레임을 보면서 생각해본 속성들을 defaultProps로 넣어준다.
그리고 const Grid box를 아래와같이 만들어준다(설명하기 길다 왜이렇게 썼는지 보면 이해될거다.)
이제 props의 속성들을 선언해준다. 선언해주는 이유가 childeren이 껴있어서
style 관련 속성을 styles로 따로 뺴려고 쓰신거같다. 원래 childeren이 없다면<Gridbox {...props}>로 끝낼 수 있었다.
(1-11강,12강,13강,숙제)
다시 보면서 어떻게 구현하는지 확인하기
- 폴더 구조, 순서 알기
- defaultProps에 어떤 속성이 들어갈지 생각해본 후 styled-component 태그를 만들어서속성 값을 직접 지정해주거나 props로 받아올지 생각한다. (defaultProps 사용 할지, props 받아온 값을 사용할지, 삼항 연산자로 쓸지 등등.)
- Onchange=() => {}, Onchange=() => {}, box-sizing: border-box; 숙지하기
- 버튼안에서 버튼 부르면 무한루프걸린다. 페이지 다시 껏다 켜야된단다.
느낀 것
컴포넌트를 최소 컴포넌트까지 쪼개 놓으니 페이지 만드는 속도가 엄청 빠르다는 것을 느꼈다.
그리고 페이지 만들 때 그리드로 어떻게 컴포넌트들을 묶고 어떤 Props를 넘겨서 사용할지 잘 생각해봐야 한다는걸 알게되었다~~~
내일 배울 것
react 주특기 강의 심화주차 2주차
