Wecode 17일차-TIL

kimu2370·2020년 2월 14일
1

오늘은 리액트를 공부하면서 자주 나오는 ES6문법에 대해 좀 더 익숙해지기 위해 ES6 문법들을 정리하려고 한다.

클래스

한번 정리한 적이 있지만, 다시 개념을 정리할 겸 간단하게 정리해보려한다.

class Developer {
  constructor(name){
    this.name = name;
  }

  hello(){
    return 'Hello World! I am ' + this.name + ' and I am a web developer';
  }
}

클래스는 새로운 객체를 생성할 때 쓰이는 식별자앞에 사용된다.
생성자(constructor)메서드는 객체를 초기화할 때 호출된다.
생성자에서 쓴 매개변수는 새로 만들어지는 객체로 전달된다.

const instance = new Developer('Dev');

클래스에서는 hello(){}처럼 메서드를 원하는 만큼 정의할 수 있다.

클래스 상속

클래스는 다른 클래스의 정의를 extends(확장)할 수 있다. 확장한 클래스로 만든 객체엔, 기존 클래스와 확장한 클래스에서 정의한 모든 메서드가 있다.

class ReactDeveloper extends Developer {
	useReact() {
      return 'React!';
    }
}
const instance = new ReactDeveloper('ReactDev');
instance.hello();
instance.useReact();

결과를 보면 ReactDeveloper클래스로 정의한 instance변수로
Developer클래스에서 정의한 hello()를 호출한 결과가
Hello World! I am ReactDev and I am a web developer 라는 것을 확인할 수 있다.

여기서는 Developer가 부모 클래스 또는 슈퍼 클래스이고, Developer를 extends(확장)해서 만들어서 부모 클래스의 메서드까지 쓸 수 있는 클래스인 ReactDeveloper자식 클래스 또는 서브클래스라고 한다.

또한 오버라이드를 통해 부모 클래스의 hello()를 자식 클래스에서 재정의하고 교체해서 쓸 수도 있다.

class ReactDeveloper extends Developer {
  useReact(){
    return 'React!';
  }
  hello(){
    return 'Hi, `${this.name}` I am a React developer';
  }
}

const instance = new ReactDeveloper('Mr.React');

React에서는

//src.app.js
import React, { Component } from 'react';

class App extends Component {
  // class content
  render(){
    return (
      <h1>Hello React!</h1>
    )
  }
}

React 클래스React 컴포넌트(component)입니다. 이 컴포넌트는
단순히 React패키지로부터 import한 React 컴포넌트 클래스를 상속받은
평범한 ES6클래스일 뿐이다. 그렇기 때문에 Component클래스에 정의 된 render()메서드 , JSX , this.state 등의 다양한 메세드를 사용할 수 있게 된다.만약 상태(state)나 라이프사이클과 관련된 메서드가 필요하지 않다면,함수를 대신 사용할 수도 있다.

화살표 함수(arrow function)

화살표 함수는 function 키워드 없이도 함수를 만들 수 있으며, return을 사용하지 않아도 식을 계산한 값이 자동으로 반환된다.

const testFn1 = test1 => {}
const testFn2 = (test1,test2) => {} 

React에서는

class App extends React.Component {
  handleClick() {
    console.log(this);
  }
  render() {
    return (
      <button type="button" onClick={this.handleClick.bind(this)}>
        Goodbye bind
      </button>
    );
  }
}

위 내용은 this.handleClick만 onClick 이벤트에 넘겨주게 되면,
실행할 당시에 문맥은 전역객체이기 때문에 bind()함수를 써서 App클래스(함수)를 바인딩시켜줘야 한다.
반면, 화살표 함수를 사용하게 되면 외부함수(부모함수)의 this를 상속받기 때문에 this는 항상 일정하다.

class App extends React.Component {
  handleClick = () => {
    console.log(this);
  }
  render() {
    return (
      <button type="button" onClick={this.handleClick}>
        Goodbye bind
      </button>
    );
  }
}

구조분해 할당

  • 배열 구조 분해
//ES6
const points = [20,30,40];
const [x,y,z] = points;
console.log(x,y,z) // 20 30 40
const [x, ,z] = points;
console.log(x,z); // 20 40
  • 객체 구조 분해
//ES6
const car = {
  type: 'Bugatti',
  color: 'black',
  model : 2015
}
const {type, color, model} = car;
console.log(type,color,model); // Bugatti black 2015

React에서는

주로 state를 할당할 때 자주 쓰인다.

reactFunction = () => {
  const {name,email} = this.state
}

매개변수를 바로 해체해서 대입할 수도 있다.

const HelloWorld = ({ hello }) => {
  return <h1>{hello}</h1>;
}

map() 과 filter()

ES5 문법이지만, React에서 자주 쓰이는 문법에 map,filter가 있다.

import React, { Component } from 'react';

class App extends Component {
  // class content
  render(){
    const users = [
      { name: 'Nathan', age: 25 },
      { name: 'Jack', age: 30 },
      { name: 'Joe', age: 28 },
    ];

    return (
      <ul>
        {users.map(user => <li>{user.name}</li>)}
      </ul>
    );
  }
}

data를 필터링하여 얻고자 하는 것만 얻고 싶다면

return (
	<ul>
      {users
          .filter(user => user.age > 26)
          .map(user => <li>{user.name}</li>)
      }
	</ul>
);

모듈(Module)

모듈은 서로 다른 자바스크립트 파일에서 쉽게 불러서 활용할 수 있는 재사용 가능한 코드 조각을 말한다. 기존의 자바스크립트를 모듈화하는 방법은 모듈의 import와 export를 처리하는 라이브러리를 활용하는 것 뿐이었다. ES6부터는 자바스크립트 자체에서 import와 export 키워드를 사용해 모듈을 지원해준다.

// add.js
const add = (num1,num2) => {
	return num1 + num2;
}
export add

//mul.js
const mul = (num1,num2) => {
	return num1 * num2;
}
export mul

//App.js
import add from './add';
import mul from './mul';

add(1,2); // 3
mul(5,6); // 30

자세한 내용들은 아래 자료를 참고하자.

profile
DO WHAT YOU LOVE

0개의 댓글