[TIL]2022.09.30

오늘 한 일

 

주특기 입문 완강

팀프로젝트 완료

스터디 준비 228까지

입문주차 개인 과제

 

오늘 느낀 것

 

const [ value, setValue ] = useState( 초기값 )

 

 

map , filter 숙지

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

 

 

추가적으로 알아둘 것

- 컴포넌트 기반

- 선언형 뷰

- JSX

- Hooks

- State & Props

- yarn과 npm의 차이점은 무엇인가?

- yarn 명령어는 어떤 것이 더 있을까?

- 반드시 CRA를 써야만 리액트 프로젝트를 생성할 수 있는 것일까?

- 클래스 컴포넌트는 무엇이고, 함수 컴포넌트와 무엇이 다른가?

- Props Drilling 이란, 무엇인가?

- [prop Types](https://ko.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper)

 

- `object literal` 이란 무엇인가?

- `default argument`란 무엇인가?

- `리액트 훅` 이란 무엇인가요?

- [공식문서 링크]

(https://ko.reactjs.org/docs/hooks-intro.html)

 

- 다른 `훅`들은 어떤 것들이 있나요?

- `const` 는 변경할 수 없는 `상수` 인데, 어떻게 setState를 이용해서 값을 변경할 수 있나요?

- component lifeCycle

 

- **(1) 불변성이란?**

 

**불변성이란 메모리에 있는 값을 변경할 수 없는 것**을 말합니다. 자바스크립트의 데이터 형태중에 원시 데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성 없습니다.

 

- **(2) 변수를 저장하면, 메모리에 어떻게 저장이 될까?**

 

만약 우리가 `let number = 1` 이라고 선언을 하면, 메모리에는 1 이라는 값이 저장됩니다. 그리고 `number` 라는 **변수는 메모리에 있는 1을 참조**하죠. 그리고 이어서 우리가 `let secondNumber = 1` 이라고 다른 변수를 선언을 했다고 가정해봅시다. 이때도 자바스크립트는 이미 메모리에 생성되어 있는 1이라는 값을 참조합니다. **즉, number와 secondNumber는 변수의 이름은 다르지만, 같은 메모리의 값을 바라보고 있는 것이죠. 그래서 우리가 콘솔에 `number === secondNumber` 를 하면 `true`가 보입니다.**

 

하지만 원시데이터가 아닌 값(객체, 배열, 함수)는 이렇지 않아요. `let obj_1 = {name: ‘kim’}` 이라는 값을 선언하면 메모리에 obj_1이 저장이 됩니다. 그리고 이어서 `let obb_2 = {name: ‘kim’}` 이라고 같은 값을 선언하면 **obj_2라는 메모리 공간에 새롭게 저장**이 됩니다. **그래서 `obj_1 === obj2` 는 `false` 가 되죠.**

 

- **(3) 데이터를 수정하면 어떻게 될까?**

 

다시 원시데이터로 돌아와서 만약에 기존에 1이던 number를 `number = 2` 라고 새로운 값을 할당하면 메모리에서는 어떻게 될까요? **원시 데이터는 불변성이 있습니다.** 즉, 기존 메모리에 저장이 되어 있는 1이라는 값이 변하지 않고, 새로운 메모리 저장공간에 2가 생기고 number라는 값을 새로운 메모리 공간에 저장된 2를 참조하게 됩니다. 그래서 **secondNumber를 콘솔에 찍으면 여전히 1이라고 콘솔에 보입니다.** **number와 secondNumber는 각각 다른 메모리 저장공간을 참조하고 있기 때문**이죠.

 

obj_1를 수정해봅시다. `obj_1.name = ‘park’` 이라고 새로운 값을 할당하면 어떻게 될까요? **객체는 불변성이 없습니다. 그래서 기존 메모리 저장공간에 있는 `{name: ‘kim’}` 이라는 값이 `{name : ‘park’}` 으로 바뀌어 버립니다.** 차이를 아시겠나요?

 

**원시데이터는 수정을 했을 때 메모리에 저장된 값 자체는 바꿀 수 없고, 새로운 메모리 저장공간에 새로운 값을 저장합니다. 원시데이터가 아닌 데이터는 수정했을 때 기존에 저장되어 있던 메모리 저장공간의 값 자체를 바꿔버립니다.**

 

- ****(4) 왜 리액트에서는 원시데이터가 아닌 데이터의 불변성을 지켜주는 것을 중요시할까?****

 

리액트에서는 화면을 리렌더링 할지 말지 결정할 때 state의 변화를 확인합니다. state가 변했으면 리렌더링 하는 것이고, state가 변하지 않았으면 리렌더링을 하지 않죠.

 

그때, state가 변했는지 변하지 않았는지 확인하는 방법이 state의 변화 전, 후의 `**메모리 주소`를 비교합니다.** 그래서 만약 **리액트에서 원시데이터가 아닌 데이터를 수정할 때 불변성을 지켜주지 않고, 직접 수정을 가하면 값은 바뀌지만 메모리주소는 변함이 없게 되는것이죠.** 그래서 즉, 개발자가 값은 바꿨지만 리액트는 state가 변했다고 인지하지 못하게 됩니다. 그래서 결국 마땅히 일어나야 할 리렌더링이 일어나지 않게되죠.

 

- ****(5) 리액트 불변성 지키기 예시****

 

배열을 setState 할 때 불변성을 지켜주기 위해, 직접 수정을 가하지 않고 전개 연산자를 사용해서 기존의 값을 복사하고, 그 이후에 값을 수정하는 식으로 구현합니다.

 

```jsx

import React, { useState } from "react";

 

function App() {

const [dogs, setDogs] = useState(["말티즈"]);

 

function onClickHandler() {

// spread operator(전개 연산자)를 이용해서 dogs를 복사합니다.

// 그리고 나서 항목을 추가합니다.

setDogs([...dogs, "시고르자브르종"]);

}

 

console.log(dogs);

return (

<div>

<button onClick={onClickHandler}> 버튼</button>

</div>

);

}

 

export default App;

```

 

- 원시 데이터 타입이란?

- 객체, 배열, 함수의 불변성을 지키면서 값을 수정할 수 있는 메서드들은 어떻게 있을까?

 

key가 필요한 이유는 React에서 컴포넌트 배열을 렌더링했을 때 각각의 원소에서 변동이 있는지 알아내려고 사용하기 때문입니다. 만약 key가 없다면 React는 가상돔을 비교하는 과정에서 배열을 순차적으로 비교하면서 변화를 감지하려 합니다. 하지만 key가 있으면 이 값을 이용해서 어떤 변화가 일어났는지 더 빠르게 알아낼 수 있게 됩니다. 즉, key값을 넣어줘야 React의 성능이 더 최적화 된다. 라는 의미입니다.

 

- 자바스크립트 파일 절대경로, 상대경로 설정하는 방법

- 자바스크립트 export, export default, import 각각은 무슨차이가 있을까?

 

- (1) Vercel이 뭔가요?

 

Vercel은 AWS 와 같은 클라우트 컴퓨팅 서비스를 제공하는 회사이면서도, 서비스의 이름이기도 합니다. 그리고 React의 Framework인 **[Next.js](https://nextjs.org/)**를 개발한 회사이기도 합니다.

 

- (2) 왜 Vercel이죠?

 

필자가 Vercel을 선택한 이유는 **아주 쉽고, 간단하며 성능도 괜찮고 일정 수준까지는 무료이기 때문**입니다. 복잡한 설정을 할 필요(Zero-config)도 없고, 단지 깃헙과 연동하고, 소스를 `push` 를 할때 마다 새로운 소스코드가 자동으로 배포도 됩니다. 또한 **SSL 설정도 자동으로 적용**이 되며, `custom domain`도 아주 쉽게 연결할 수 있습니다.

 

vscode 단축키

 

1. 주석: ctrl + /, command + /

2. 사이드바 토글: ctrl + B, command + B

3. 전체 선택: ctrl + A, command + A

4. 선택 영역 복사: ctrl + C, command + C

5. 붙여넣기: ctrl + V, command + V

6. 코드 취소: ctrl + Z, command + Z

7. 코드 복원: ctrl + Y, command + Y

8. 검색 : ctrl + F, command + F

9. 프로젝트 폴더 전체 검색: ctrl + shift + F, command + shift + F

10. 빠른 행 이동: ctrl + G, command + G

11. 일치 단어 선택: ctrl + D, command + D

12. 한번에 일치 단어 선택: ctrl + shift + L, command + shift + L

13. 부분 선택: alt + 마우스 왼쪽 클릭, option + 마우스 왼쪽 클릭

14. 잘라내기: ctrl + X, command + X

15. 라인 이동: alt + ↑ or ↓, option + ↑ or ↓

16. 라인 복제: alt + shift + ↑ or ↓, option + shift + ↑ or ↓

17. 페이지 상단/하단 이동: ctrl + home or end, command + ↑ or ↓

18. 열린 탭 이동: ctrl + PgUp or PgDown, command + option + ← or→

19. 다음 행 삽입: ctrl + Enter, command + Enter

20. 터미널 열기: ctrl + `, command + `

 

alt + F12 = 함수 미리보기 저장 등등

ctrl + shift + R = refactoring

함수 드래그 하고 F2 = rename 할 때 연관된 거 싹다

리네임 연결 된 거 까지

 

내일 할 일

 

입문주차 개인 과제 완료하기

패캠 강의 듣기