[React] 한입 크기로 잘라 먹는 리액트 정리 (1)

자료형과 형 변환

- Primitive Type(원시 타입)

한 번에 하나의 값만 가질 수 있다. 하나의 고정된 저장 공간 이용

let number = 10;

- Non-Primitive Type(비 원시 타입)

한 번에 여러 개의 값을 가질 수 있다. 여러 개의 고정되지 않은 동적 공간 사용

let array = {1, 2, 3, 4, 5};

 

자료형 코드 예시

let age = 20; //정수

let tall = 180.1; //실수

let int = Infinity; //무한대

let minusInt = -Infinity; //음의 무한대

let nan = NaN; //수학적 연산 실패

 

undefined

변수에 값을 할당하지 않고, 출력 시 자동으로 undefined라는 값을 할당받음

변수는 존재하나, 어떠한 값으로도 할당되지 않아 자료형이 정해지지(undefined) 않은 상태

 

null

변수는 존재하나, null로 (값이) 할당된 상태. 즉 null은 자료형이 정해진(defined) 상태

let variable1;
console.log(variable1); //undefined

let variable2;
console.log(variable2); //null

백틱 & 템플릿리터럴

템플릿 리터럴 내의 모든 공백은 있는 그대로 적용되고 엔터도 적용됨.

let engName = "React";
let korName = "리액트";
let res = `React ${korName};
console.log(res); //React 리액트

 

casting

JavaScript 엔진은 다른 자료형 간의 연산을 수행할 때 적절하게 변환(casting)해서 연산을 수행해준다.

명시하지 않은 자동 형변환은 묵시적 형변환이라고 부른다.

//형변환 테스트 코드

//값은 유지하며 자료형을 변경하는 형변환
let numberA = 12;
let numberB = 2;

console.log(numberA * numberB); //24

//값은 유지하며 자료형을 변경하는 형변환
let numberC = 12;
let numberD = "2";

console.log(numberC * numberD); //24 -> 문자열 2를 자동으로 숫자 2로 인지 후 계산

//문자열과 숫자의 덧셈은 숫자를 문자열로 바꿔서 문자열을 붙임
let numberE = 12;
let numberF = "2";

console.log(numberE + numberF); //122

//이 경우 parseInt()로 해결
console.log(numberE + parseInt(numberF)); //14

 

연산자

• 대입
• 연결
• 복합
• 증감
• 논리
• 비교
• 대소비교
• typeof
  • 값의 타입을 알 수 있는 연산자
  • 확실한 값의 타입 일치확인을 위해서는 비교 연산자인 "==="을 활용하는 것이 좋다.

let compareA = 1;
compareA = "1";

console.log(typeof compareA); //string

• null 변환 연산자
  • 양쪽의 피연산자 중에 null이나 undefined가 아닌 값을 선택함

let a; //undefined
a = a ?? 10;
console.log(a); //10

 

조건문

어떤 연산의 결과의 참/거짓에 따라서 다른 명령을 각각 실행할 수 있도록 도와주는 문법

• if/ else if/ else
• switch

 

함수 선언식과 함수 표현식

//함수 표현식과 선언식의 차이
console.log(helloB()); //호이스팅
console.log(helloA()); //error!

//함수 표현식 - 호이스팅 x
//함수 표현식으로 생성된 함수들은 해당 함수가 직접적으로 선언되기 전에는 접근 불가
let helloA = function() {
	return "hi";
}; 

console.log(helloA()); //정상수행

//함수 선언식 - 호이스팅 o
function helloB() {
	return "hi";
}

** 호이스팅 : 함수 선언식으로 만들어진 함수들은 프로그램 실행 전에 프로그램 최상단으로 끌어올려진다. 그래서 밑에서 선언을 하여도 위에서 호출하여도 정상적으로 출력된다.

 

화살표 함수

let helloA = () => {
	return "hi";
};

console.log(helloA()); //hi

//더 간략화 사용 가능
let helloA = () => "hi";
console.log(helloA()); //hi

 

콜백함수

어떤 다른 함수에 매개변수로 함수를 넘겨주는 것

매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다.

function checkMood(mood, goodCallback, badCallback) {
  if (mood === "good") {
    //기분 좋을 때 하는 동작
    goodCallback();
  } else {
    //기분 안 좋을 때 하는 동작
    badCallback();
  }
}

function cry() {
  console.log("ACTION :: CRY");
}

function sing() {
  console.log("ACTION :: SING");
}

function dance() {
  console.log("ACTION :: DANCE");
}

checkMood("sad", sing, cry);

//checkMood 함수가 먼저 호출되고, 매배변수로 들어온 mood의 값에 따라 sing, cry 함수 둘 중 한가지가 나중에 호출된다.

 

객체

주로 객체 리터럴 방식으로 객체를 생성함

객체는 자바스크립트에서 데이터를 표현하는 방식 중 하나로 key, value 쌍으로 구성

let example = {
	'name':'Cindy',
    	'age':21
    	//키(key):프로퍼티 명 , 값(value):프로퍼티 값

• 문자, 숫자, 함수, 배열, undefined, boolean 등 모든 자료형을 property value로 사용할 수 있음
• key는 반드시 문자열로 이루어져야 함

 

내장 배열 함수

JS는 굉장히 많은 내장함수들을 가지고 있음

내장함수는 객체의 메서드와 같은 것

 

- forEach

forEach메서드는 배열을 반복하는 매서드, for문을 보다 쉽게 구현하는 것

//for문 사용
const a = [1,2,3,4,5];

for(let i=0; i<a.length; i++) {
	console.log(a[i]); //12345
}

//forEach 사용
const a = [1,2,3,4,5];

a.forEach(function(s) {
	console.log(s); //12345
})

- Map

Map 메서드는 해당 원본 배열의 모든 요소를 이용하여 새로운 배열을 반환하는 메서드

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

const b = a.map(function(s){
	return s * s;
})

console.log(b); //1 4 9 16 25

- includes

주어진 배열에서 전달받은 인자와 일치하는 값이 존재하는지 확인 (===값과 타입까지)

주어진 배열에서 인자로 받은 값이 존재하는지 아닌지 boolean으로 return 한다.

//값이 배열에 존재하는지 안 하는지
const arr = [1,2,3,4,5];

let number = 3;

arr.forEach((value) => {
	if(value === number){
    	console.log(true);
     }
});

console.log(arr.includes(number));

그 외에도 filter, reduce, splice, slice, shift, pop, unshift, push, indexof, findindex, find, join 다양한 내장함수가 있다.