리액트 심화 1주차 정리

[수업 목표]

1. 자바스크립트 문법을 정리한다.
2. 객체 생성자에 대해 알아본다.
3. 함수의 개념에 대해 알아본다.
4. 메인 페이지를 만들어본다.
5. 기획서를 보고 컴포넌트를 쪼개본다.

 

1. 자바스크립트 문법

 

-호이스팅(선언 끌어 올리기):

자바스크립트가 파일을 읽어올 당시에 선언을 맨 위로 끌어올리는 것

따라서 var는 선언을 하기 전에도 쓸 수 있음!

var는 선언과 초기화를 같이함.

-실행 컨텍스트: 자바스크립트는 파일을 받으면 파일을 한번 다 읽어보고 그 다음에 실행함

 

-TDZ(Temporal Dead Zone) = 일시적 사각지대

let과 const도 호이스팅이 되지만 var과의 차이점은 변수가 선언되기 전에 호출하면 ReferenceError가 남.

 

왜 에러가 날까?

선언한 후, 초기화 단계에서 메모리에 공간을 확보해야 하는데, 선언을 호이스팅해도 초기화 전까지 메모리에 공간이 없어서 변수를 참조할 수 없기 때문에. 

 

<요약>

→ let, const 선언도 호이스팅 된다.

→ 스코프에 진입할 때 변수를 만들고, TDZ가 생성되지만 코드 실행이(=실행 컨텍스트가) 변수가 있는 실제 위치에 도달할 때까지 엑세스를 못할 뿐!

→ 면접에 자주 나와요.

 

 

-자료형

심볼형: 

심볼은 유일성이 보장되는 자료형이기 때문에, 설명이 동일한 심볼을 여러 개 만들어도 각 심볼값은 다름. 심볼에 붙이는 설명(심볼 이름)은 어떤 것에도 영향을 주지 않는 이름표 역할만을 한다.

설명이 같은 심볼 두 개를 만들고 이를 비교해보면 동일 연산자(==)로 비교 시 false가 반환되는 것을 확인할 수 있음!

let id1 = Symbol("id");
let id2 = Symbol("id");

alert(id1 == id2); // false

 

2. 객체 생성자

 

객체란?

-오직 한 타입의 데이터만 담을 수 있는 원시형과 달리, 다양한 데이터를 담을 수 있다.

• 프로퍼티는 {key : value}로 구성
• key에는 문자형, value에는 모든 자료형이 들어갈 수 있음

-객체 만드는 법 두가지

- 상수는 재할당이 안되지만 const로 선언된 객체는 수정될 수 있음.

const로 선언된 객체는 객체에 대한 참조를 변경하지 못한다는 것을 의미.

즉, 객체의 프로퍼티는 보호되지 않음! 

 

3. 함수의 개념

-자바스크립트에서의 함수

자바스크립트는 함수를 특별한 값 취급을 함.

자바스크립트는 ()가 있으면 함수를 실행하고 ()가 없으면 함수를 문자형으로 바꿔 출력하기도 함. (함수를 값으로 취급) 이걸 응용하면, 함수를 복사할 수 있고, 또 매개변수처럼 전달할 수 있음.

함수는 기본적으로  return으로 어떤 값을 넘겨주지 않는다면 undefined를 반환함. 

 

-함수 선언문 vs 함수 표현식

 

함수 선언문:

// 이렇게 생긴 게 함수 선언문 방식으로 함수를 만든 거예요.
function cat() {
	console.log('perl');
}

 

함수 표현식:

// 이렇게 생긴 게 함수 표현식을 사용해 함수를 만든 거예요.
let cat = function() {
	console.log('perl');	
}

// 물논 화살표 함수로 써도 됩니다.
// 다만 주의하실 점! 화살표 함수는 함수 표현식의 단축형이라는 거! 주의하세요! :) 
let cat2 = () => {
	console.log('perl2');
}

 

함수 선언문은 선언과 동시에 바로 초기화되고 함수 표현식은 바로 초기화가 되지 않음!

 

-화살표함수는 생성자로 못씀. 

-함수 표현식에서 this는 그 함수 자체인데, 화살표함수에서 this는 위쪽에 있는 부모를 불러옴.

 

 

지역 변수와 외부 변수

 

지역 변수:

• 함수 내에서 선언한 변수
• 함수 내에서만 접근 가능

외부 변수(global 변수):

• 함수 외부에서 선언한 변수
• 함수 내에서도 접근할 수 있다.
• 함수 내부에 같은 이름을 가진 지역 변수가 있으면 사용할 수 없다.

let a = 'a';
let b = 'b';
let c = 'outter!';
const abc = () => {
	let b = 'inner!';
	c = 'c';
	let d = 'd';
	console.log(a, b, c, d);
}

console.log(a, b, c, d); // a, b, outter, undefined

abc(); // a, inner, c, d

console.log(a, b, c, d); // a, b, c, undefined

 

콜백 함수

-함수를 값처럼 전달할 때, 인수로 넘겨주는 함수를 콜백 함수

const playWithCat = (cat, action) => {
	action(cat);
}

const useBall = (cat) => {
	alert(cat+"과 공으로 놀아줍니다.");
}

//playWithCat 함수에 넘겨주는 useBall 함수가 콜백 함수입니다!
playWithCat("perl", useBall);

 

Prototype (면접 단골 질문)

 

: 객체는 함수를 사용해서 만들어 질 것이고, 그 객체는 함수의 프로토타입 객체를 복사해서 생성한다.

그리고 이 객체는 어떤 원본 객체를 복사해서 내가 생성된건지에 대한 정보를 가지고 있다.

 

자바스크립트의 모든 객체는 자신의 부모 객체와 연결되어 있어요.

좀 더 정확히는 부모 객체의 원형하고요!(부모 객체의 프로토타입) 마치 객체 지향에서의 상속 개념처럼 부모 객체의 프로퍼티나 메소드를 상속받아 쓸 수 있고요. (실제로는 상속보다 위임에 가깝다고 하지만, 통상적으로 상속한다고 표현해요.) 이런 부모 객체를 프로토타입 객체, 혹은 그냥 프로토타입이라고 부릅니다. 🙂 그리고 부모 객체를 참조하는 걸 두고 프로토타입 링크라고 해요.

// animal이라는 객체를 하나 만들었습니다!
let animal = {
	leg: 4,
	legCount() {
		console.log(this.leg); // this는 animal을 의미합니다.
	}	
};

// 또 다른 객체 cat을 만들었고요!
// animal을 프로토타입 상속 받아올 거예요. (__proto__를 씁니다.)
let cat = {
	__proto__:animal, // cat의 프로토타입은 animal!
	cute: true,
};

// 프로토타입을 설정해주어서 cat은 animal의 메소드와 프로퍼티를 사용할 수 있어요.
cat.legCount();
console.log(cat.leg);

// cat만 가지고 있는 프로퍼티도 있고요!
console.log(cat.cute);
// animal은 cat의 속성을 가져올 수 없어요!
console.log(animal.cute);

• 위 예제에서 animal은 cat의 프로토타입 객체입니다.  cat의 프로토타입은 animal이라고도 해요!
• cat.legCount()에서 실행되는 legCount는 animal에서 상속된 메소드예요.
• → animal의 메소드와 속성이 복사되어 cat에 들어가는 게 아닙니다!
• animal을 상속 받은 cat, cat을 상속받은 다른 객체를 만들 수도 있을거예요.
  • 순환 참조는 되지 않아요! (animal은 cat을 상속받은 객체를 상속할 수 없어요!)
• → 이런 식으로 상속이 쭉쭉 내려가는 걸 프로토타입 체인이라고 불러요.

 

컴포넌트 쪼개기

1. 뷰만 생각하거나 2. 데이터를 중심으로 생각하거나 여러 방법이 있음

많은 경험이 쌓여야 잘 쪼갤 수 있음

 

 

<미니 프로젝트: 포스트 목록 만들기>

 

-최소단위 컴포넌트는 왜 만들어주는거야?

 

그리드의 경우 마진이나 패딩 배열이 여러번 반복될 경우 아예 틀을 만들어주고

필요할때마다 변형시켜서 (함수처럼) 쓰기 위함.

반복되는 컴포넌트들의 재사용(편의)를 위해서.

 

1. 페이지부터 만들기

1)PostList.js

2)react-router-dom으로 라우터 잡아주기

3)App.js에서 불러오기

 

2. 페이지에 들어갈 내용을 크게 쪼개서 컴포넌트 만들기

1)들어갈 내용 나누기

2)데이터를 받아올 내용과 가공이 필요한 내용 분리

ex. defaultProps

 

3. 최소단위 컴포넌트 만들기 -1 

0)styled-components 설치하기

1)Grid 잡기

 

4. 최소단위 컴포넌트 만들기 -2

1)Image 컴포넌트 만들기

 

5. 최소단위 컴포넌트 만들기 -3

1)Text 컴포넌트 만들기

 

<숙제: 로그인, 회원가입 페이지 만들기>

 

1. App.js에서 밑줄친 부분 밑에 로그인이 있어야 할 것 같다.

그럴려면 pages에 로그인페이지부터 만들어줘야겠구나!

2. pages안에 Login.js , Signup.js 만들어주기

3. 기획서 돌아와서 로그인 페이지 확인하기

-위에 헤더 있고 아래 로그인 텍스트 있고, 그 아래 인풋 두개 있고 그 아래 버튼이 있네.

여기서 중간단위로 쪼갠다 하면 뭘 쪼개야 할까? 생각해봤는데 중간단위로 쪼개기엔 반복된다라고 할만한 부분이 딱히 없는 것을 확인! 

->그럼 헤더랑 페이지 내용만 구분하면 되겠군!

그럼 이 로그인 페이지는 따로 중간단위 컴포넌트를 두는게 아니라 로그인 텍스트, 텍스트 최소단위 컴퍼넌트 엘리먼트에 만들었던 것 같다 쓰고 버튼도 최소단위로 만들어서 쓰면 된다.

4. 로그인페이지 만들기

기본 틀 만들어주고 <React.Fragment>안에 넣어야할것들 텍스트로 적어주기.

근데 로그인은 텍스트로 뺄 수 있으니까 미리 만들어왔던 Text 임포트 해와서 적용해주기.

이제 이 화면 확인하고싶은데 어떻게 해야해?

App.js에서 경로부터 만들어주기!

5. App.js에 가서 임포트부터 해오기.

6. 이제 아이디, 패스워드, 버튼에 해당하는 최소 단위 컴포넌트 만들어 줄 차례!

어떻게 만드느냐? 

elements 폴더 하위에 최소 단위 컴포넌트 다 들어갈거니까 새 파일해서 Input.js, Button.js 만들어주기.

 

7.Input.js

인풋을 만들었으면 인풋에 해당하는 기본적으로 받아와야 하는어떤것들을 미리 넣어줘야 함.

8. index.js에다 얘를 갖다 쓸 수 있게 임포트

9. Login 페이지에도 와서 Input 임포트 해오고 Input페이지로 가서 Input에다가 받아온 props 하나씩 넣어주기!

10. 이런식으로 Button, Header 등 만들어주고 Login 페이지에 적용시켜주고를 반복..

 

11. 직접 해보면서 다시 인강 봐야할듯!