Wecode 17일차-TIL

kimu2370·2020년 2월 14일
0

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

클래스

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

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

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

클래스 상속

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

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

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

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

React에서는

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

화살표 함수(arrow function)

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

React에서는

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

구조분해 할당

  • 배열 구조 분해
  • 객체 구조 분해

React에서는

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

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

map() 과 filter()

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

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

모듈(Module)

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


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

profile
어제 보다 더 나은 개발자가 되고 싶은

0개의 댓글