모든 일련의 과정을 직접 적어줘야 하는 JS. React가 JS 기반 언어기 때문에 한번 전체적으로 JS를 훑고 들어가자.

 

var, const, let

데이터의 수정 여부에 관계 없이 모든 데이터 타입에 사용할 수 있었던 var는 구 버전 JS에서 많이 사용했다. 유저나 프로그래머가 값을 바꾸면 안되는 경우를 처리해주기 위해 수정 불가능한 const 자료형과 수정이 가능한 let 자료형이 등장했고 우리는 기본적으로 const로 데이터를 선언하되, 수정이 필요하다면 추후 let으로 바꾸도록 하자.

 

Exports & Imports 

const person = {
	name: 'Yeji'
}

export default person
export const someFn = () => { ... }
export const someData = 26;

위의 두 js 코드는 각각 default로 export 해주거나 개별 요소를 export 해주고 있다. 두 요소를 다른 js 코드에서 import 시킬 때 default로 내보낸 것은 어떤 이름으로 받아도 상관 없으나, 개별 요소가 export된 경우 정확한 이름을 명시하여 데이터를 가져와야 한다. 만약 데이터의 이름을 바꾸고 싶다면 'as'라는 키워드를 사용하여 alias를 설정한다.

 

만약 export한 데이터가 여러 개고 그 데이터를 모두 가져오고 싶다면 '*' 키워드를 사용하여 한꺼번에 모두 가져올 수 있다.

import person from './person.js'
import personData from './person.js'

import { someFn } from './util.js'
import { someData } from './util.js'
import { someData as age } from './util.js'

import * as bundle from './util.js'

 

Classes

class는 JS object의 blueprint라고 생각하자. 그 안에는 데이터, 함수, 생성자가 포함될 수 있으며 다른 클래스를 상속받을 수도 있다. 하단의 코드는 es6 방식이다.

class Female {
  constructor() {
    this.gender = 'Female';
  }
  printGender(){
    console.log(this.gender);
  }
}

class Student extends Female {
  constructor() {
    super();
    this.name = 'Yeji';
  }
  printName() {
    console.log(this.name);
  }
}

const student = new Student();
student.printName();
student.printGender();

 

다만 상속받은 데이터에 접근하려면 먼저 부모의 생성자를 호출( super() )한 뒤 사용해야 한다. 만약 Student  클래스 생성자 내에 super(); 가 빠지면 "ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor" 에러를 볼 수 있다. 

 

조금 더 모던한 방식으로 class를 선언해보자. 바로 변수값에 접근할 수 있고, this 키워드를 사용하지 않아도 된다는 장점이 있다. 만약 JS Bin으로 실습중이라면 상단에서 ES6 / Bable로 바꿔줘야 에러가 나지 않는다!

class Female {
  gender = 'Female';
  
  printGender = () => {
    console.log(this.gender);
  }
}

class Student extends Female {
  name = 'Yeji';
  
  printName = () => {
    console.log(this.name);
  }
}

const student = new Student();
student.printName();
student.printGender();

 

Spread & Rest Operators

'...' <- 이게 연산자다 놀랍게도.

 

Spread 연산자의 경우, array 요소나 object 속성을 쪼갤 때 사용한다. array나 object에 ...를 붙여주면 안에 들어있는 요소를 모두 꺼내서 처리해주는 편리한 기능이다.

const nums = [1,2,3];
const newNums = [...nums, 4];

const person = {
  name:"yeji"
}

const student = {
  ...person,
  age: 26
}

 

Rest 연산자의 경우, 함수의 arguments를 하나의 array로 합쳐줄 때 사용한다. 몇 개의 인자가 오든, 하나의 배열로 받아 처리할 수 있다.

const filter = (...args) => {
  return args.filter(data => data === 1);
}

console.log(filter(1,2,3,4));

 

Destructuring

Spread 연산자는 안의 모든 데이터를 꺼내서 새로운 요소를 만들 때 사용하지만, destructuring은 배열의 요소나 object의 속성을 추출해서 새로운 변수에 저장할 때 사용한다.

 

const nums = [1,2,3];
[num1, num2] = nums;
console.log(num1, num2); // 1 2

{name} = {name:'yeji', age:26}
console.log(name); // yeji
console.log(age); // undefined

 

Reference Type

자바에서 기본 데이터형(8가지, 논리형, 정수형, 실수형, 문자형)을 제외하고 다른 데이터 타입은 reference type이다. 즉 값을 메모리 상에 저장한 뒤 변수에는 그 메모리의 주소값만을 가지고 있는 타입이다. 따라서 JS에서 array나 object를 복제할 때 그 데이터 전체를 복제하게 되면 같은 주소를 다른 변수 2개가 가리키고 있는 상태가 될 수 있다.

const person = {
  name: "yeji"
}

const newPerson = person;

위와 같이 newPerson 객체를 만들게 되면, person 객체의 데이터를 변경했을 때 newPerson 객체의 데이터 역시 바뀌게 된다. 같은 주소지의 값을 가리키고 있기 때문에 당연한 결과다. 따라서 만약 안의 값들만 복제하고 싶다면 ... 연산자를 사용하여 새로운 배열이나 객체를 만들어 값을 넘겨주는 방식을 사용해야 한다. 

const person = {
  name: "yeji"
}

const newPerson = {
  ...person
};

 

참조 변수를 안의 데이터를 복사하여 새로운 요소를 만들어 복제하는 것이 아니라 단순 그 값 전체를 넘겨주게 된다면 예기치 못한 버그 폭탄을 맞을 수 있으니 주의하자.

 

Array Function 복습

array Function 방식은 코드를 간결하게 하는데 아주 유용하다. 많이 사용되는 패턴 하나를 통해 익혀보자.

const nums = [1,2,3];

const doubleNums = nums.map((num) => {
  return num*2;
})

 

array 내의 다양한 함수는 Mozilla 공식 문서(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)를 참고하자.

 

Array - JavaScript | MDN

The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name, and has members for performing common array operations.

developer.mozilla.org

 

map 함수는 해당 배열 내의 요소에 모두 접근하여 동작을 수행한 뒤 return되는 요소로 새로운 배열을 만들어주는 함수이다. 아주 유용하니까 기억해두자. 어차피 자주 사용해서 익숙해질 것이다 :) 

 

그 외에도 기억해두면 좋을 요소들은 한번 더 정리해두겠다. 기능이 기억나지 않는다면 읽어볼 것!

( 오,,, filter함수 shallow copy해준다.... 공식문서 영어버전을 보길 잘했다. 예기치 않은 버그를 만날 수도 있겠는걸)

저작자표시

'React > 개념' 카테고리의 다른 글

React Basics  (0) 2022.07.20
React : create-react-app  (0) 2021.05.19
React의 메인 개념 : component  (0) 2021.05.19

+ Recent posts

티스토리툴바