TIL 20210923 [항해99 8일차]

돔이란?
DOM은 html 단위 하나하나를 객체로 생각하는 모델이다. 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있는데 이런 구조를 트리 구조라고 한다.
즉, DOM이 트리구조!

• 다양한 자식 요소 접근 방식
  https://developer.mozilla.org/ko/docs/Web/API/Document

Scope란?
어떤 변수를 선언했을 때, 그 변수를 사용할 수 있는 유효범위를 스코프라고 부른다.
변수에 접근할 수 있는 범위!

• var: 함수 단위
• let: block 단위(변수: let으로 선언한 변수는 값이 변할 수 있습니다.)
• const: 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);
}

조건부 삼항연산자
if문의 단축 형태
사용법:
조건 ? 참일 경우 : 거짓일 경우

let info = {name: "mean0", id: 0};

let is_me = info.name === "mean0"? true : false;

console.log(is_me);

자주 사용되는 내장함수 4가지 -> map, filter, concat, from
내장 함수는 우리가 만들지 않아도 자바스크립트가 쓰기 편하라고 미리 만들어둔 코드 묶음들!

• map은 배열에 속한 항목을 변환할 때 많이 사용한다.
  어떤 배열에 속한 항목을 원하는 대로 변환하고, 변환한 값을 새로운 배열로 만들어준다.
  즉, 원본 배열은 값이 변하지 않는다!

const array_num = [0, 1, 2, 3, 4, 5];

const new_array = array_num.map((array_item) =>{ 
	return array_item + 1;
});
// 새 배열의 값은 원본 배열 원소에 +1 한 값입니다.
console.log(new_array);
// 원본 배열은 그대로 있죠!
console.log(array_num);

• filter는 어떤 조건을 만족하는 항목들만 골라서 새 배열로 만들어주는 함수이다.
  원본 배열은 변하지 않고, 원하는 배열을 하나 더 만들 수 있다니 (최고)!

const array_num = [0, 1, 2, 3, 4, 5];

// forEach(콜백함수)
const new_array = array_num.filter((array_item) => {
	// 특정 조건을 만족할 때만 return 하면 됩니다!
	// return에는 true 혹은 false가 들어가야 해요.
	return array_item > 3;
});

console.log(new_array);

• concat은 배열과 배열을 합치거나 배열에 특정 값을 추가해주는 함수이다!
  원본 배열은 변하지 않는다.

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];

const merge = array_num01.concat(array_num02);

// 중복 항목(숫자 3)이 제거되었나요? 아니면 그대로 있나요? :)
console.log(merge);

P.S concat은 중복 항목을 제거해주지 않는다!
다른 내장함수와 함께 사용해서 제거해야 한다!

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];
// Set은 자바스크립트의 자료형 중 하나로, 
// 중복되지 않는 값을 가지는 리스트입니다. :)!
// ... <- 이 점 3개는 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array_num01]은 array_num01에 있는 항목을 전부 꺼내 
// 새로운 배열([] 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
const merge = [...new Set([...array_num01, ...array_num02])];

// 중복 항목(숫자 3)이 제거되었나요? 아니면 그대로 있나요? :)
console.log(merge);

• from은 쓰임새가 다양한 친구🙂
  1) 배열로 만들고자 하는 것이나 유사배열을 복사해서 새로운 배열로 만들 때
  2) 새로운 배열을 만들 때 (초기화한다고도 표현) 주로 사용!

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

// 배열화 하자!
const my_name = "mean0";
const my_name_array = Array.from(my_name);
console.log(my_name_array);

// 길이가 문자열과 같고, 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 규칙
1. 태그는 꼭 닫아주기
2. 무조건 1개의 엘리먼트를 반환하기
3. JSX에서 javascript 값을 가져오려면 중괄호{}를 쓴다.
4. class 대신 className!
5. 인라인으로 style 주기

라이프 사이클 함수

컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프 사이클이다.
공식 문서(https://ko.reactjs.org/docs/state-and-lifecycle.html)에서도 자세히 다루고 있다.

• 컴포넌트는 생성되고 → 수정(업데이트)되고 → 사라진다.
• 생성은 처음으로 컴포넌트를 불러오는 단계이다.
• 수정(업데이트)는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트 된다. 아래의 경우!
  props가 바뀔 때
  state가 바뀔 때
  부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때)
  또는, 강제로 업데이트 했을 경우! (forceUpdate()를 통해 강제로 컴포넌트를 업데이트할 수 있다.)
• 제거는 페이지를 이동하거나, 사용자의 행동(삭제 버튼 클릭 등)으로 인해 컴포넌트가 화면에서 사라지는 단계이다.

라이프 사이클 함수로 보는 라이프 사이클
클래스형 컴포넌트에서만 사용할 수 있다.
(리액트 16.8버전부터 등장한 React Hooks으로 라이프 사이클 함수를 대체할 수 있다.)

• constructor()
• render()
• componentDidMount()
• componentDidUpdate(prevProps, prevState, snapshot)
• componentWillUnmount()

State와 Props

state는 Component가 가지고 있는 데이터이다.
props는 Component가 부모 Component로부터 받아온 데이터이다.

Ref

그런데 만약에, 내가 어떤 인풋박스에서 텍스트를 가져오고 싶으면 리액트에선 어떻게 하면 좋을까? → 답은, 리액트 요소에서 가져온다!

• React 요소를 가지고 오는 방법1(클래스형 컴포넌트 방법) : React.createRef()
• React 요소를 가지고 오는 방법2(함수형 컴포넌트 방법) : React.useRef() (-> 리액트훅)

State 관리

• 클래스형 컴포넌트에서 state 관리 - setState()
  클래스형 컴포넌트의 state를 업데이트할 때 사용하는 함수이다.
• 함수형 컴포넌트에서 state 관리 - useState()
  함수형 컴포넌트는 클래스형처럼 자체적으로 state를 가지고 있지 않지만, react hooks를 사용하면 state를 가질 수 있다!

리액트 기본개념들을 배우게됐는데 아직 클래스 컴포넌트랑 함수형 컴포넌트랑 개념이 완전히 잡히지 않아서 어려운거 같다...