[새싹x코딩온] 웹 퍼블리싱 과정 11주차 - 3 | JS for React - 전개구문, 구조 분해 할당, 클래스, 모듈 / React - Component, JSX

JS for React

전개구문 (spread)

전개구문이란? 반복 가능한 객체(배열, 유사 배열, 문자열 등)에 사용하는 문법이다. 

객체의 요소에 접근해서 요소들을 하나씩 분리해서 전개요소에 접근해서 반환한다.

연산자 ...을 사용한다.

 

배열에 접근

const arr1 = [1, 2, 3, 4, 5];
const arr2 = ['a', 'b', 'c'];

# 전개구문을 사용해서 쉽게 두 배열을 합칠 수 있다.
const arr3 = [...arr1, ...arr2];
console.log(arr3)  # [1, 2, 3, 4, 5, 'a', 'b', 'c']

 

문자열에 접근

const str = 'hello';
const strArr = [...str];
console.log(strArr)  # ['h', 'e', 'l', 'l', 'o']

 

구조 분해 할당

배열, 객체의 요소를 각각의 개별적인 변수에 담아두는 것

const [변수1, 변수2, ...] = 배열
const {변수1, 변수2, ...} = 객체

 

배열의 구조 분해 할당

arr[0], arr[1]처럼 접근하는 것이 아닌 각각의 배열 요소를 변수의 이름으로 접근하기 위해서 사용한다.

const arr5 = ['tomato', 'kiwi', 'banana'];
const [val1, kiwi, banana] = arr5;
console.log(val1)  # tomato

const arr6 = ['빨강', '주황', '노랑', '분홍'];

# 중간에 값을 비울 수도 있다.
const [red, orange, , pink] = arr6;

# default값을 정할 수 있다.
# 요소보다 선언된 변수의 갯수가 많아도 error가 발생하지 않고 undefined가 뜬다.
const [v1, v2, v3 = 'default', v4, v5 = 'green'] = arr6;

 

구조 분해 할당을 이용해서 교환하기

value1 = 'second'
value2 = 'first'
[value1, value2] = [value2, value1]

 

오브젝트(객체)의 구조 분해 할당

배열의 구조 분해 할당처럼 객체의 오브젝트의 key로 접근하는 것이 아닌 변수로 접근하기 위해서 사용한다.

변수 선언 순서에 따라서 값이 할당되는 것이 아닌 key의 이름에 따라서 변수에 값이 할당된다.

let obj = {
    title: '제목',
    content: '내용',
    num: 0
};
const {title, num, content} = obj
console.log(content);  # 내용

# key와 다른 이름으로 할당하는 방법
const {title:t2, content:c2, num:n2} = obj;
console.log(t2)  # 제목

 

나머지 매개변수 ...rest

나머지 매개변수는 함수의 인자에서 무한한 인자의 개수를 한 개의 배열에 모두 집어넣어서 컨트롤할 수 있게 해준다.

function test(...val){
    const [a, b, ...rest] = val;
    console.log(a)  # 1
    console.log(b)  # 2
    console.log(rest)  # [3, 4]
}
test(1, 2, 3, 4)

 

클래스

클래스란 ES6부터 등장한 객체를 만드는 방법이다.

정해진 틀로 같은 규격의 오브젝트를 여러 개 만들 수 있다. → 재사용할 때 유리하다.

 

클래스 생성

new 키워드를 이용해서 미리 만들어둔 클래스 형태의 오브젝트를 만들 수 있다.

클래스 생성 시 클래스의 이름은 PascalCase로 짓는다.

class House{

  constructor(year, name, window){

    this.year = year

    this.name = name

    this.window = window

  }

  getAge(){

    console.log(`${this.name}는 건축한지 ${2023 - this.year}년 지났어요`);

  }

  getWindow(){

    console.log(`${this.name}의 창문은 ${this.window}개 입니다.`);

  }

}

const house1 = new House(1789, '자이', 10);

console.log(house1);  // House { year: 1789, name: '자이', window: 10 }

house1.getAge();  // 자이는 건축한지 234년 지났어요

house1.getWindow();  // 자이의 창문은 10개 입니다.

 

클래스 상속

extends라는 키워드를 사용해서 상속을 받을 수 있다.

상속을 이용하면 기존에 있던 클래스의 속성과 메소드를 받아와서 사용하되, 추가적인 속성과 메소드를 더 정의할 수 있다.

class Apartment extends House{

  constructor(year, name, window, floor, windowMaker){

    super(year, name, window);

    this.floor = floor;

    this.windowMaker = windowMaker;

  }

  getAptInfo(){

    return `${this.year}에 지어진 ${this.name}.

    총 층수는 ${this.floor}, 창문의 갯수는 ${this.window}`;

  }

  getWindow(){

    return `${this.name}아파트의 ${this.window}개의 창문은

    ${this.windowMaker}에서 만들었습니다.`

  }

}

 

모듈

모듈에는 기능 단위로 모아둔 함수, 변수 등이 있다.

모듈은 누구나 만들 수 있고, 다른 사람이 만든 모듈을 우리가 사용할 수도 있다.

 

ES6 방식 모듈

만든 모듈을 export 시켜서 다른 곳에서 사용할 수 있도록 하고 만들어진 모듈을 import를 이용해서 사용한다.

 

React

component

component란 화면을 구성하는 하나의 부분이다.

내부의 데이터만 변경해서 전체적인 틀(UI)을 재사용할 수 있다.

다양한 component

 

Component를 만드는 방법

클래스형 컴포넌트 vs 함수형 컴포넌트

• React 초창기에는 함수형 컴포넌트에는 현재 리액트의 핵심기능(state, lifecycle 등)을 사용할 수 없었다.
• React 16.8 부터 hooks 의 등장으로 함수형 컴포넌트에도 핵심기능을 사용할 수 있게 되었다.
• 과거에는 다양한 기능을 사용할 수 있는 클래스형 컴포넌트를 사용했지만, 현재는 더 쉬운 문법을 가지고 있는 함수형 컴포넌트의 사용 비율이 압도적으로 높다.

 

JSX

Javascript + XML

 

전체는 하나의 태그로 감싸야 한다.

html 태그는 항상 return 이후에 나와야 하고 반드시 하나의 부모 요소가 전체 요소를 감싸는 형태여야 한다.

 

HTML width JS

html를 작성하다가 중간에 js 문법을 사용하고 싶을 때는 {중괄호}로 감싸야 한다.

삼항연산자 대신 if 문이 올 수 없고 for문 또한 JSX 내부에 올 수 없다.
for문과 if문을 사용하고 싶다면 return 이 오기 전에 결과값을 저장하고 사용하면 된다.

 

인라인 style 적용

css르 인라인 형태로 적용할 때는 {object}형태로 저장해야 한다.

css 속성은 camelCase를 사용한다.

return 위에 object를 변수에 담아놓고 사용할 수도 있다.

 

class와 onclick

class 대신 className, onclick 대신 onClick을 사용한다.

클래스 이름을 따로 선언해서 className = {class-name}처럼 사용할 수 있다.

 

opening tag

opening tag(빈태그)도 closing tag가 필요하다.