09.20

항해 리액트 1주차

HTML CSS Javascript >> 정적자원이라고 부른다.

웹의 동작방식은 간단하게 말하면
클라이언트는 서버에 요청을 서버는 클라이언트에게 응답을 하는 것

<div>안녕하세요</div>   요소(Elements)
<div></div>            태그(Tag)

DOM(Document Object Model) 문서객체모델
DOM은 html 단위 하나하나를 객체로 생각하는 모델이다. 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있는데 이런 구조를 트리 구조라고 한다. DOM도 트리 구조이다.

CamelCase
이름을 짓는 경우 띄어쓰기가 필요한 곳에 띄어쓰기 대신 대문자를 넣는데
이게 낙타 등 같다고해서 지어진 이름이라고 한다.
귀여워

변수 선언은 let, const로 한다.
let은 재할당이 가능하다.
하지만 const는 재할당이 불가능하다. >> 변수가 아닌 상수

스코프(Scope)가 뭘까?
우리가 어떤 변수를 선언했을 때, 그 변수를 사용할 수 있는 유효범위를 스코프라고 한다.
var는 함수 단위
let, const는 block 단위
{} 증괄호 안에 든 내용을 block이라고 표현한다.

function scope(){
	const a = 0;
	let b = 0;
	var c = 0;

	if(a === 0){
		const a = 1;
		let b = 1;
		var c = 1;
		console.log(a, b, c);
	}
	// 앗! c는 값이 변했죠? 
	// 그렇습니다. var는 함수 단위라서 if문 밖에서 선언한 값이 변했어요.
	// let과 const로 선언한 겂은 어떤가요? if문 안쪽 내용이 바깥 내용에 영향을 끼치지 않죠?
	console.log(a, b, c);
}

함수 표현식 :

    // 함수 이름은 생략해도 괜찮아요!
    let do_something = function [함수 이름]() { ... }

화살표 함수 >> 함수 표현식의 단축형!

  // 화살표 함수는 함수 표현식의 단축형입니다.
  // function까지 생력이 되었죠!
  let do_something = () => { ... }

Spread 문법
어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내는 문법
let array = [1, 2, 3, 4, 5];
... << 스프레드 문법
[...array]는 새로운 [ ]객체 안에 요소들을 넣어주는게 되겠다.

삼항 연산자

if문의 단축형태!

let is = 5
let e = is === 5? 3: 4;

물음표 앞 까지는 조건이 들어간다. >> 만약 is === 5 라면
콜론 앞은 참일 때의 값 세미 콜론 앞의 값은 거짓일 때의 값으로 여기선 참이므로 3이 출력된다.

Array 내장함수

map

원본 배열을 유지하면서 변환시켜 새로운 배열을 만들어낸다.

filter

어떤 조건을 만족하는 항목들만 골라서 새로운 배열을 만들어내지만 요소 자체를 변경할 수는 없다.

concat

배열들을 합칠 때 사용한다. 단, 중복 요소를 제거해주진 않는다.

ex) 
const dogs = ["검은 강아지", "노란 강아지", "흰 강아지"];
const cats = ["검은 고양이", "복슬 고양이", "노란 고양이"];
const pets = dogs.concat(cats);

console.log(pets) = ['검은 강아지', '노란 강아지', '흰 강아지', '검은 고양이', '복슬 고양이', '노란 고양이']

from

1. 배열로 만들고자 하는 것이나 유사배열을 복사해서 새로운 배열로 만들 때
2. 새로운 배열을 만들 때 (초기화)

유사배열이 뭘까?
[ 어떤 값들... ] 이 모양으로 생겼지만 배열의 내장 함수를 사용하지 못하는 친구들입니다. DOM nodelist같은 게 유사배열이에요.**

//배열화
	const my_name = 'hoon'
	const my_name_array = Array.from(my_name);
	my_name_array = ["h", "o", "o", "n"] 

// 길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
	const text_array = Array.from('hello', (item, idx) => {return idx});
	console.log(text_array);


// 새 배열을 만들어 보자!(=> 빈 배열을 초기화한다고도 해요.)
// 길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
	const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;});
	console.log(new_array);       

JSX

Javscript + XML

JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 뷰를 그린다.
뷰를 그리는 요소들이 자바스크립트 파일에 들어간다.
리액트는 HTML파일이 하나만 있다.

리액트 규칙

1. 태그는 꼭 닫아주기
2. 무조건 1개의 엘리먼트를 반환하기
3. JSX에서 javascript 값을 가져오려면?
4. class 대신 className! id는 그대로 id
5. 인라인으로 style 주기 , 스타일은 딕셔너리로 넘겨줘야 한다. {키:밸류}

return에서 if문을 사용할 수 없으므로 대신 삼항연산자를 사용,