꼭 알고 있어야 할 react 문법!

내장 함수란?

자바스크립트에서 자체적으로 제공하는 함수를 내장 함수라고 한다. 내장 함수는 이미 시스템에 정의되어 있기 때문에 사용자가 별도로 정의하지 않고 주어진 원칙에 따라 사용하면 되는 함수이다

 

함수 선언식

function do_something() { ... }

함수 표현식

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

화살표 함수

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

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

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

</aside>

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

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

console.log(is_me);

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

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