리액트 기초반

DOM(Document Object Mode)

문서 객체 모델
DOM

각 태그에 대한 정보를 지니고 있는 JavaScript 객체
html 단위 하나하나를 객체로 생각
DOM은 트리 구조이다.

document 현재 dom트리
document.body body내용 확인
document.head head 내용 확인
자식 요소에 접근
document.body.childNodes 자식 노드에 접근(HTML태그 아닌것도 반환)
document.body.children 자식 요소에 접근(HTML 태그만 반환)
document.getElementsByTagName("div")div태그 반환

자바스크립트 기초1

document.getElementsByClassName("wrap") 클래스 명으로 DOM 요소에 접근
배경색 바꾸기

const title = document.getElementById("title");
title.style.backgroundColor = "yellow";

onClick 이벤트를 발생

function sayHello (event) {
            console.log("hello");             
         }
        const buttons = document.getElementsByTagName("button");
        for (let i=0; i< buttons.length; i++){
            buttons[i].addEventListener("click", sayHello);
        }

document에 DOM 요소 추가하기

const new_div = document.createElement("div"); //요소 만들기

//화면에 표시되게 스타일 추가
new_div.style.backgroundColor = "green";
new_div.style.width = "100px";
new_div.style.height = "100px";

document.body.appendChild(new_div); // 요소를 body에 추가

자바스크립트 기초2

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

scope();

함수

함수는 코드 묶음이다.

함수 선언식 :
```
function do_something() { ... }
```

함수 표현식 :

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

화살표 함수

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

클래스

클래스는 특정 객체를 생성하기 위해 변수와 함수를 정의하는 일종의 틀. 객체를 정의하기 위한 상태와 함수로 구성
객체 단위로 코드를 그룹화하고 쉽게 재사용하려고 사용

class Cat {
	// 생성자 함수
  constructor(name) {
		// 여기서 this는 이 클래스입니다.
		this.name = name; 
	}

	// 함수
	showName(){
		console.log(this.name);
	}
}

// 여기서 new는 키워드예요. 새로운 무언가를 만들기 위해서 생성자 함수와 함께 씁니다.
// new와 생성자 함수는 세트
let cat = new Cat('perl');
cat.showName();
console.log(cat);

클래스 상속
이미 만들어 둔 어떤 클래스를 가지고 자식 클래스를 만든다.

class Cat {
	// 생성자 함수
  constructor(name) {
		// 여기서 this는 이 클래스입니다.
		this.name = name; 
	}

	// 함수
	showName(){
		console.log(this.name);
		return this.name;
	}
}

// extends는 Cat 클래스를 상속 받아 온단 뜻입니다.
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);
my_cat.showName();
my_cat.showAge();

Spread 연산자

어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내준다

let array = [1,2,3,4,5];
// ... <- 이 점 3개를 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array]은 array에 있는 항목을 전부 꺼내 
// 새로운 배열([] => 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
let new_array = [...array];

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

삼항연산자

조건 ? 참일 경우 : 거짓일 경우

let info = {name: "mean0", id: 0};
let is_me = info.name === "mean0"? true : false;
console.log(is_me);

자바스크립트 기초3

리액트에서 자주 쓰는 내장함수

map

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);

[1, 2, 3, 4, 5, 6]

filter

filter는 어떤 조건을 만족하는 항목들만 골라서 새 배열로 만들어주는 함수. 원본 배열은 변하지 않고, 원하는 배열을 하나 더 만든다.

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

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

console.log(new_array);

[4, 5]

concat

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

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

const merge = array_num01.concat(array_num02);

console.log(merge);

[0, 1, 2, 3, 3, 4, 5]
concat은 중복 항목을 제거해주지 않는다.
중복 제거하는 법
const merge = [...new Set([...array_num01, ...array_num02])];

from

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

// 배열화 하자!
const my_name = "mean0";
const my_name_array = Array.from(my_name);
console.log(my_name_array); //['m', 'e', 'a', 'n', '0']

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

console.log(text_array); //[0, 1, 2, 3, 4]


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

console.log(new_array); //[0, 1, 2, 3]

JSX 규칙

1. 태그는 꼭 닫아주기
  <input type='text'/>
1. 무조건 1개의 엘리먼트를 반환하기

return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type='text'/>
    </div>
  );

1. JSX에서 javascript 값을 가져오려면? 중괄호를 쓴다!

const cat_name = 'perl';
return (
  <div>
  hello {cat_name}!
  </div>
);

1. class 대신 className!
  JSX로 작성하는 태그 내에서 클래스 명을 정해줄 땐 속성 값을 className으로 사용합니다.
  <div className="App">
1. style 주는 방법
  인라인 방법
  <p style={{color: 'orange', fontSize: '20px'}}>orange</p>

스타일을 변수로 만들고 쓰기

function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

1강 끝

할 일 적은 후 추가, 완료 버튼 누르면 배경색 변하기.

1강 숙제는 추가로 완료하기 버튼을 누르면 배경이 다시 흰색으로 돌아오는 것도 해보고 싶었는데 잘 되지 않아서 틈나면 해봐야 겠다.
리액트를 배우기 위한 자바스크립트 사용 방법을 배웠다. 자바스크립트를 정리해 볼 수 있었고 리액트를 사용할 때 잘 몰랐던 JSX 규칙을 배울 수 있었다.

Author And Source

이 문제에 관하여(리액트 기초반 - 1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lipton/항해99-리액트-기초반-1강

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

리액트 기초반 - 1