리액트 기초반 1주차 - 2

22.03.31(목)
스파르타코딩클럽 리액트 기초반 - 1주차 과정

◎ Javascript 기초 내용

• Javascript로 DOM을 조작

// ClassName을 기준으로 찾기
const wraps = document.getElementsByClassName("wrap");

// Id를 기준으로 찾기
const title = document.getElementById("title");
// style 추가 가능
title.style.backgroundColor = "yellow";

// Tag로 찾기
const buttons = document.getElementsByTagName("button");


let showBox =document.getElementById("showTodoList")
let new_div = document.createElement("div");
// input box의 값을 가져옴
let somth = document.getElementById("addList").value;
// class 추가, 안의 HTML 추가
new_div.className += "todobox"
new_div.innerHTML = `<text class="todotext" id="test">${somth}</text> <button class="finButton">완료</button>`
showBox.appendChild(new_div)

• 변수의 Scope (ES6 기준)
  • var (재선언 O): 함수 단위
  • let (재선언 O), const (재선언 X)
    : 블럭 단위 / { } 안에 든 내용

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); // 1 1 1
	}
	console.log(a, b, c); // 0 0 1
}

• Class
  • 특정 객체를 생성하기 위해 변수와 함수를 정의하는 일종의 틀
  • 상속 : 이미 만들어 둔 어떤 클래스를 가지고 자식 클래스를 만듦

class Cat {
  constructor(name) {
		this.name = name; 
	}
	showName(){
		console.log(this.name);
		return this.name;
	}
}

class MyCat extends Cat {
  constructor(name, age) {
		// super를 메서드로 사용하기
		super(name); 
		this.age = age; 
	}
	
	// 오버라이딩: 부모 클래스가 가진 것과 같은 이름의 함수를 만듦
	showName(){
		console.log(this.name);
		// super를 키워드로 사용하기
		return '내 고양이 이름은 '+super.showName()+'입니다.';
	}
	
	showAge(){
		console.log('내 고양이는 '+this.age+'살 입니다!');
	}
}

let my_cat = new MyCat('perl', 4);

// 오버라이팅한 자식 Class의 함수를 사용
my_cat.showName(); // 내 고양이 이름은 perl입니다.
my_cat.showAge(); // 내 고양이는 4살 입니다.

• 등호 구분

// = 대입시에 사용
let a = 0
// 유형을 비교하지 않는 등차
1 == '1' // True
// 유형까지 비교하는 등차 / 더 자주 사용할 예정
1 === '1' // Flase

• Spread 연산자

let array = [1,2,3,4,5];
// ... <- 이 점 3개를 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.

let new_array = [...array];
console.log(new_array);  // [1,2,3,4,5]

let new_array2 = [...array, ...new_array];
console.log(new_array2); // [1,2,3,4,5,1,2,3,4,5]

• Array 내장함수

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

// map
const new_array = array_num.map((array_item) =>{ 
	return array_item + 1;
});
console.log(new_array); // [6,5,4,3,2]


//filter
const new_array = array_num.filter((array_item) => {
	// 특정 조건을 만족할 때만 return 하면 됩니다!
	// return에는 true 혹은 false가 들어가야 해요.
	return array_item > 3;
});
console.log(new_array); // [5,4]


//concat
let marge = array_num.concat([6,7])
console.log(marge); // [5,4,3,2,1,6,7]


 //from
const my_name = "mean0";
const my_name_array = Array.from(my_name);
console.log(my_name_array); // ["m","e","a","n","0"]


const text_array = Array.from('hello', (item, idx) => {return idx});
console.log(text_array); // [0,1,2,3,4]


const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;});
console.log(new_array); // [0,1,2,3]

• 삼항연산자, 화살표 함수 참고문서