😴

역시 오늘도 피곤 그 자체...
오늘부터 3주간 주특기 주간이다.
바로 학습에 돌입했는데, 중간에 1시간 정도 기절해버렸다(ㅋ)
1-7강 완전 통곡의 벽임...

Array 내장 함수

#map

const 원본 배열 = [1, 2, 3, 4, 5];
const 새 배열 = 원본 배열.map((arr_item) => {
	return arr_item + 1; 
});

---------------------
console.log(원본 배열);
 = [1, 2, 3, 4, 5]
console.log(새 배열);
 = [2, 3, 4, 5, 6]
 ---------------------

이런 식으로 원본 배열을 망가트리지 않으면서, 원하는 방식으로 배열의 각 요소를 변환할 수 있는 함수. 일종의 반복문이다.

#filter

 const 원본 배열 = [1, 2, 3, 4, 5]
 const 새 배열 = 원본 배열.filter.((arr_item) => {
 	return arr_item > 3;
 });
    
--------------------
 console.log(새 배열);
 = [4, 5]
-------------------- 

조건을 만족하는 항목만 골라내 새 배열로 만들어주는 함수.
원본 배열을 훼손하지 않는다.

#concat

const 원본 배열 [1, 2, 3, 4, 5];
const 새 배열 = [4, 5];

const 둘을 더한 배열 = 원본 배열.concat(새 배열);

--------------------------
console.log(둘을 더한 배열);
 = [1, 2, 3, 4, 5, 4, 5]
--------------------------

원본 배열에 다른 배열을 더해주는 함수.
원본 배열의 뒤로 합쳐지며, 중복되는 요소는 제거되지 않음.
원본 배열을 훼손하지 않는다.
콘캣... 귀여워...

#from

> 문자열을 배열로 만들기

const 문자열= "river";
const 문자 배열 = Array.from(문자열);

----------------------------
console.log(문자 배열);
 = ["r", "i", "v", "e", "r"]
----------------------------

> 문자열을 인덱스 배열로 만들기

const 인덱스 배열 = Array.from(문자열, (item, index) => {return index});
----------------------------
console.log(인덱스 배열);
= [0, 1, 2, 3, 4]
----------------------------

> 또 다른 사용 예시
const 새 배열 = Array.from({length: 4}, (item, index) => { return index; });

console.log(새 배열);
[0, 1, 2, 3]

배열이 아닌 것을 배열로 만들 때, 유사 배열을 복사해 새로운 배열로 만들 때, 새로운 배열을 만들 때 주로 사용된다.

유사 배열 : 배열과 비슷한 모양으로 생겼지만, 내장 함수를 사용하지 못하는 배열. ex)DOM nodelist

리액트 셋팅하기

1. NVM 설치 (node.js 버전 관리 툴)
https://github.com/coreybutler/nvm-windows/releases
- 버전 확인 : nvm --version
- node.js 설치 : nvm install [설치할 버전 넘버]
- 설치된 노드 리스트 : nvm ls
- 노드 버전 확인 : node -v
- 노드 버전 변경 : nvm use [사용할 버전 넘버]

2. 기본 터미널 bash로 변경

3. NPM으로 yarn 설치 (패키지 매니저)
npm은 노드 설치시 함께 설치된다.
- yarn 설치 : npm install -g yarn
- yarn 버전 확인 : yarn -v
- yarn으로 패키지 설치 : yarn add [설치할 패키지 이름]

4. yarn으로 CRA(create-react-app) 설치
웹 사이트 제작 시 필요한 것들을 종합해둔 패키지
yarn add global create-react-app

5. 리액트 프로젝트 만들기
yarn create react-app week-1

6. 리액트 프로젝트 시작하기
cd week-1
yarn start

JSX

https://ko.reactjs.org/docs/introducing-jsx.html

JS 파일 내에선 html 태그를 사용할 수 없기 때문에, 이와 유사한 마크업을 넣어 UI 작업에 용이하도록 만들어진 언어.
html을 품은 자바스크립트... 에품자...🧡

리액트에서는 jsx 문법을 사용해 리액트 요소를 만들고, 이 요소를 DOM 위에 렌더링 한다. (리액트 프로젝트의 html 파일은 index.html 단 하나뿐!)

JSX 규칙

- 태그 꼭 닫아주기

- 무조건 1개의 엘리먼트를 반환하기

jsx는 return 할 수 있는 요소 수가 단 하나이기 때문에, 형제 관계의 구조를 만들 경우 에러가 발생한다.
return 할 수 있는 요소가 아예 존재하지 않을 경우도 에러가 발생! null이라도 반환해 주어야 한다.

- JSX에서 javascript 값을 가져오려면?

중괄호를 사용하면 쉽게 가져올 수 있다.

javascript에서 return하지 못하는 것들은 jsx 역시 return하지 못함(ex_if문 - 삼항연산자로 변환 시 가능)

- class 대신 className

html처럼 class로 변경시 에러가 발생한다
근데 id는 그대로 id임.

- 인라인으로 style 주기

jsx는 string 형태의 스타일 입력 시 에러가 발생한다!
style={{marginRight:spacing+'em'}}같은 딕셔너리 형태로 넘겨주어야 함.

벌써 2시 반이다!!!!!!
세수하고 잡시다!!!!