hmk run dev

리액트 1주차 본문

React

리액트 1주차

hmk run dev 2021. 3. 19. 15:28

웹의 기본 동작방식

웹이 어떻게 우리에게 보여줄까?

 

웹은 요청응답으로 이루어져 있다

클라이언트가 서버에게 우리가 보기위한 어떤 데이터를 만들어 주는 친구

클라이언트 요청 서버는 요청한 정보를 응답

 

서버에서 클라이언트로 전달해주는 형식 - JSON

키에 대응하는 어떤 값이 키쌍( : )으로 이루어진  데이터 타입

 

서버리스란?

서버리스란? 서버를 내가 만들필요가 없다는 말 서버는 있다!

이미 누가 잘 만들어 놓은 서버를 빌려다가 쓰는 것

 

자바스크립트 ES6문법

 

let과 const는 블록 안에서 유효 (블록 스코프) / {}

var는 함수 단위로 유효 / function

 

  • =
  • =는 할당을 뜻합니다. 어떤 변수에 값을 할당할 때 써요.
  • ==
  • ==는 등차입니다. 유형을 비교하지 않는 등차예요. 변수 값을 기반으로 비교합니다. (ex. 0 == "0"은 true를 반환합니다.)
  • ===
  • ===도 등차입니다! 유형도 비교하는 등차예요. 엄격한 비교죠! (ex. 0 === "0"은 false를 반환합니다.) 숫자와 문자도 구별

 

삼항 연산자는 if문의 단축 형태입니다.

사용법: 조건 ? 참일 경우 : 거짓일 경우

 

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

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

console.log(is_me);

 

내장 함수

파이썬의 for문과 비슷하다 어레이의 요소들을 변수로 지정해주고 변수에 조건을 씌워준다

 

Map

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

const new_array = array_num.map((array_item) =>{ return array_item + 1; });

//array_num의 요소요소들을 변환해서 새로운 정렬로 만들기
// 새 배열의 값은 원본 배열 원소에 +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);

근데 concat은 중복 단어를 처리해 주지 않는다.

이럴 때 ...new Set을 사용해주면 된다

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

배열을 만들때 자주 쓰는 것

 

// 배열화 하자!
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});
# item은 hello문자열의 하나하나 idx 는 순서를 의미
# 문자는 필요없고 순서만 뽑고 싶다 [0,1,2,3,4]


console.log(text_array);


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

console.log(new_array);
# [0,1,2,3] length에 따라 정렬의 크기가 바뀜 //
# (item, idx)=>{ return idx;}라는 옵션이 없으면 [undefined,undefined,undefined,undefined]

 

filter 이용해보기

const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];

let cats = [];
for (let i = 0; i < animals.length; i++) {
	let animal = animals[i];
	// indexOf는 파라미터로 넘겨준 텍스트가 몇 번째 위치에 있는 지 알려주는 친구입니다.
	// 파라미터로 넘겨준 텍스트가 없으면 -1을 반환해요!
	// 즉 아래 구문은 고양이라는 단어를 포함하고 있니? 라고 묻는 구문이죠!
	if (animal.indexOf("고양이") !== -1) {
		cats.push(animal);
	}
}
console.log(cats);

위 코드를 filter를 이용해서 표현해보기 >>

const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];

let cats = animals.filter((animal)=>{
    return animal.indexOf("고양이") !== -1; // -1이면 고양이가 없단소리
})

두 배열을 합치기

const dogs = ["검은 강아지", "노란 강아지", "흰 강아지"];
const cats = ["검은 고양이", "복슬 고양이", "노란 고양이"];

const merge = dogs.concat(cats)

'React' 카테고리의 다른 글

styled 컴포넌트 이쁘게만들기  (0) 2021.03.19
SCSS 사용해보기!  (0) 2021.03.19
클래스형 컴포넌트와 함수형 컴포넌트  (0) 2021.03.19
리액트 Component  (0) 2021.03.19
리액트 첫 번째 프로젝트  (0) 2021.03.19
Comments