[복습]React 주요 개념 정리 - JavaScript

React를 처음 접하고 공부하면서 어떤 기능을 하고 어떻게 사용해야되는지 이해는되지만 

전반적으로 어떤상황에서 사용을 해야되고 응용이 좀 잘 안되는 것 같아 다시한번 복습하면서 정리를 하려고 한다.

 

향후 내가 웹 사이트를 만들려고 할때 정리한 내용을 보면 나한테 지금 필요한 부분은 무엇인지 순서 상 어떻게 놓치고 있진않은지

쉽게 파악하고 진행할 수 있는 자료가 되었으면 한다!

 

1. 필수 프로그램 설치

 

- Github : 궁금한 내용을 찾아보다보면 수많은 사람들이 여기에 소스코드를 공유하고 있는걸 알 수 있다.

                  지금보다 코드를 해석하는 능력이 더 생긴다면 활용도가 너무나도 높다!

- Visual Studio Code : 리액트네이티브 코드를 작성할 프로그램 

- NVM : 여러가지 버전의 노드를 관리 할 수 있도록 도와주는 친구 (하나의 PC에 여러 노드 버전을 사용하게 도와준다고한다.)

※ 설치 참고 자료 

https://grepper.tistory.com/2

NVM (Node Version Manager) 설치 (in mac)

 

2. 자바스크립트 주요 개념

React는 JavaScript 라이브러리 이다. 자바스크립트에 대한 이해가 충분히 필요한 언어라고 생각된다!

우선은 자주 사용 되는 기본 개념에 대해서는 복습해보고 자바스크립트에 대해서는 깊게 따로 공부해보도록 하자.

 

2-1. Class 

  클래스는 특정 개체를 생성하기 위한 변수와 함수를 정의하는 틀 

  (상태 와 함수로 구성되어 있다.)

   - 생성자 함수 : 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화 한다.(초기값을 설정한다고 보면된다)

   - 함수 : 어떤일을 하는 친구 

 

class Cat {

   constructor(name){

       this.name = name;

   }

}

 

생성자함수는 constructor() 이며, name이라는 인스턴스를 생성하고 인스턴스를 초기화 해준다.

이때, this는 이 클래스를 가르킨다. 

 

showName(){

    console.log(this.name);

}

 

함수로 특정 일을 하도록 도와주는 친구

 

※ 클래스를 상속하려면?

클래스를 상속한다는 의미는 이미 만들어둔 어떤 클래스를 가지고 자식 클래스를 만든다는 거!!

 

class MyCat extend cat {

    constructor(name, age){

         super(name);

         this.age = age;

    }

}

 

constructor 생성자 함수 이다.

super 키워드는 생성자 함수 안에서 메소드로 사용할 수 있다.

(부모의 constructor를 호출하면서 인수를 전달한다. this를 쓸 수 있게 해준다.)

 

showName(){

   return '내 고양이 이름은 '+super.showName()'입니다.'

}

 

super 키워드는 키워드로 사용할 수 있다. (부모 클래스에 대한 필드나 함수를 참조 할 수 있다.)

 

 

2.2 let , const , scope 

- Scope : 우리가 어떤 변수를 선언했을때, 그 변수를 접근할 수 있는 유효범위를 뜻한다. (변수에 접근할 수 있는 범위)

- var : 함수단위

- let : block 단위( let 으로 선언한 변수는 값이 변할 수 있다.)

- const : block 단위 (const로 선언한 변수는 값이 변하지 않는다.)

function scope() {

    ...

}

 

중괄호 {} 안에 든 내용을 block단위라고 한다. 

 

2.3 = , == , ===

 

= : 할당을 뜻한다. 어떤 변수에 값을 할당할때 사용

== : 등차이며, 유형을 비교하지 않고 값만을 가지고 비교한다. ( 0 == "0" 은 true를 반환한다 → 유형을 비교하지않기에)

=== : 등차이며, 유형까지 비교를 한다. 

 

2.4 Spread 연산자 , 삼항연산자

- Spread 연산자 : 어떤 객체 안에 있는 요소들을 객체 밖으로 꺼내주는 친구

   ... ← 이 점 3개를 Spread문법이라고 한다. 

 

let Array = [1,2,3,4,5]

let new Array = [...Array];

 

- 조건부 삼항 연산자

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

 

2.5 Array 내장함수

- map 함수

   어떤 배열에 속한 항목을 원하는 대로 변환하고 변환한 값을 새로운 배열로 만들어준다.

   (원본 배열은 변하지 않는다)

 

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

 

const new_array = array_num.map((array_item) => {

      return array_item +1;

});

 

- filter

어떤 조건을 만족하는 항목들만 골라서 새로운 배열을 만들어준다. 원본배열은 변하지 않으면서 원하는 배열을 하나 더 만들 수 있다.

 

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

 

const new_array = array_num.filter((array_item) => {

      return array_item  > 3;

});

 

- concat 

배열을 합치거나 배열에 특정 값을 추가해주는 함수!

다만 concat은 중복된 함수를 제거해주지 않고 모두 합쳐버린다. 

 

const array_num1 = [0,1,2,3];

const array_num2 = [3,4,5];

 

const merge = array_num01.concat(array_num2);

 

※ 중복된 값을 제거해주는 방법

Set은 자바스크립트의 자료형 중 하나로 중복되지않는 값을 가지는 리스트이다. 

스프레드문법을 활용해서 배열에 항목들을 다 꺼내서 Set 자료형을 적용해주면된다,

 

const array_num1 = [0,1,2,3];

const array_num2 = [3,4,5];

 

const merge = [...new Set([...array_num1, ...array_num2])];

 

여기에서 [] 는 껍데기가 새로운 별을 뜻하는것이며, 새로운 배열에 넣어주겠다는 의미.

 

- from 

배열을 만들거나 유사배열을 복사해서 새로운 배열을 만들 수도 있고, 새로운 배열을 만들때도 사용한다.(초기화한다고도함)

※ 유사배열이란?

     [어떤값들...] 이러한 모양으로 생겼지만 배열의 내장함수를 사용하지 못하는 친구들을 뜻함. DOM nodelist 같은 친구들.

 

 

- reduce

reduce 메서드의 사용 예시는 아래와 같다.

 

reduce((누적값, 현재값, 인덱스, 요소) => {return 결과}, 초기값);

이전값이 아니라 누적값이라는것에 주의해야한다!

• acc는 accumulator의 약자로, 누적값을 의미한다.
• curr은 current의 약자로, 현재 배열의 원소 값을 의미한다.
• 인덱스 0부터 반복이 시작된다.

reduce 함수를 통해 평균값을 구해보자.

중복되는 문자 카운트하기.