한입 크기로 잘라 먹는 리액트 - 자바스크립트 기초편

기본적으로 아는 내용은 경청하고 몰랐던 내용이나 다시 정리가 필요한 내용만 기재함.

 

리액트를 배워야 하는 이유

자바스크립트의 UI 라이브러리

Facebook(meta) 이 개발한 오픈 소스

 

 

https://codesandbox.io/

CodeSandbox: Code, Review and Deploy in Record Time

해당 사이트로 js 공부

 

 

Non Promitive Data Type : 함수, 배열, 객체

 

함수 선언식 - 호이스팅O

function 함수명(매개변수) { }

 

함수 표현식 - 호이스팅X

const 함수명 = function (매개변수) { }

 

 

객체 선언

1. 객체 리터럴 방식

const obj = { };

2. 객체 생성자 방식

const obj = new Object();

---

객체 안의 함수는 '메서드'

함수가 아닌 다른 키값은 '멤버' 로 칭함

 

객체의 프로퍼티에 접근하기

1. 점 표기법

객체명.키값

2. 대괄호 표기법

객체명["키값"]

 

객체의 프로퍼티 추가 -> const 로 선언해줘도 변경이 가능하다..

1. 점 표기법

객체명.키값 = 추가해줄 값

2. 대괄호 표기법

객체명['키값'] = 추가해줄 값

 

 

객체의 프로퍼티 삭제

1. 점 표기법

delete 객체명.키값

2. 대괄호 표기법

delete 객체명['키값']

-------> 메모리가 남아있음

null 을 대입해서 삭제하면 메모리가 사라지므로 추천!

const person = {
	name : '홍길동',
    age : 54,
};

person.name = null;

 

객체의 프로퍼티가 존재하지 않는데 접근하는 경우

undefined 가 리턴됨

프로퍼티가 존재하는지 확인하는 연산자 : in -> boolean 리턴

'키값' in 객체명

 

 

배열 선언

1. 배열 리터럴

let arr = [ ];

2. 배열 생성자

let arr = new Array();

 

배열의 값은 자료형과 무관하게 담길 수 있음

 

배열의 인덱스를 통해 값에 접근 가능(객체는 키를 통해 값에 접근 했음)

 

 

배열의 내장 함수

1. forEach(콜백함수) : 배열의 모든 원소를 순회하는 용도

2. map(콜백함수) : 배열의 모든 원소를 순회하며 추가로 원하는 행동을 실행한 뒤 행동을 취한 배열을 리턴해주는 함수

 

3. includes(인자) : 인자와 같은 배열의 원소가 존재하면 true 리턴

4. indexOf(인자) : 인자와 같은 배열의 원소가 존재하면 가장 먼저 발견된 그 인덱스 값을 리턴, 없으면 -1 리턴 

 

5. findIndex(콜백함수) : 배열의 모든 원소를 순회하며 콜백함수의 리턴을 조건식으로 해주고, 해당 조건식을 충족하면 가장 먼저 발견된 인덱스를 리턴

6. find(콜백함수) : 배열의 모든 원소를 순회하며 콜백함수의 리턴을 조건식으로 해주고, 해당 조건식을 충족하면 가장 먼저 발견된 요소를 리턴

 

7. filter(콜백함수) : 콜백함수의 리턴을 조건식으로 하여, 해당 조건식을 충족하는 모든 요소들을 배열로 리턴

 

8. slice(시작인덱스, 끝인덱스) : 시작인덱스에서 끝인덱스-1 까지 자른 배열을 리턴

9. 배열1.concat(배열2) : 배열1 뒤에 배열2를 붙여서 새로운 배열을 리턴

 

10. sort() : 원본 배열의 순서를 정렬 (오름차순) '문자'를 기준으로(사전순으로) 정렬하므로 '숫자'를 정렬하려면 인자로 비교함수를 넣어줘야 한다.

const compare =  (a, b) => {
	return a - b; // 오름차순
    // 내림차순 : return b - a;
}

 

11. join() : 배열의 원소들을 합쳐서 문자열로 리턴 (기본적으로 원소 사이는 , 로 구분되지만 인자에 원하는 문자열을 넣어주면 원소 사이를 구분시킬 수 있다)