0605 TIL

Yang⭐·2021년 6월 5일

TIL

목록 보기

4/10

ES6 Classes

객체를 생성하기 위한 템플릿.
class는 "특별한 함수". 함수처럼 class표현식, class선언 두가지 방법이 있다.

class 선언

class Rectangle {
  sonstructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

함수 선언과 클래스 선언의 차이점은 함수 선언은호이스팅이 일어나지만, 클래스 선언은 클래스를 먼저 선언해야한다. 그렇지 않으면 ReferenceError가 나타남.

호이스팅이란?

javascript는 변수가 선언되기 전에 함수를 호출하더라도 작동한다. 초기화가 아닌 선언만 끌어올리기 때문에 변수를 선언한 뒤 나중에 초기화시킨다면 값은 undefined로 지정된다.

class 표현식

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // Rectangle
// named
let Rectangle = class Rectangle2{
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // Rectangle2

React

this.state를 직접적으로 사용하면 안되는 이유

setState는 비동기로 동작하기에 this.state.count + 1을 3번 작성한다면 count에 남는 값은 1이다.

잘못된 값을 전달하지 않기 위해선??
updater라고 명명된 함수를 전달하는 방법이 있다.

this.setState( value => ({ count: value.count + 1 });
this.setState( value => ({ count: value.count + 1 });
this.setState( value => ({ count: value.count + 1 });

state의 값은 3으로 예상한 값이 나옴.

Component Life Cycle

컴포넌트 클래스에서 특별한 메서드를 선언해 컴포넌트가 실행되거나, 업데이트 되거나, 제거될 때 특정한 이벤트를 발생시키게 한다.

가장많이 사용되는 것들은
Mounting = 컴포넌트가 처음 실행될 때
Update = 컴포넌트가 업데이트될 때
Unmounting = 컴포넌트가 삭제될 때/페이지가 교체될 때

Mount

constructor()
getDerivedStateFromProps() / 자주사용안됨
render()
componentDidMount()

constructor() = javascript 메소드.
JS에서 class를 만들 때 호출되는것.

constructor(props){
  super(props)
  ...
}

componentDidMount() = component가 render되고 난 다음. 주로 AJAX(data를 fetch하기)를 요청하거나, setTimeput, setInterval 등을 실행함.

Update

state를 변경할 때 / setState()가 실행될 때.

render()
componentDidUpdate()

componentDidUpdate() = render된 후, state의 값이 변경될 때 실행된다. 실행될 때는 다시 렌더링이 되고,componentDidUpdate가 실행된다.

Unmounting

componentWillUnmount()

다른 페이지로 이동 등, 컴포넌트가 삭제될 때 실행된다.

AJAX란?

Javascript 라이브러리중 하나로, 브라우저가 가지고 있는 XMLHrrpRequest 객체를 이용해 전체 페이지를 새로고침 안해도 페이지의 일부만을 위한 데이터를 로드하는 기법.

JavaScript를 이용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술.
✅ 즉 자바스크립트를 통해 서버에 데이터를 요청하는것!

Axios와 fetch의 차이점

fetch()는 body프로퍼티를 사용, axios는 data프로퍼티를 사용.
fetch의 url이 fetch()함수의 인자로 들어감, axios에서는 url이 option 객체로 들어감.
fetch에서 body부분은 stringify()로 된다.

Axios로 데이터 받아오기

axios는 componentDidMount()단계에서 사용하기.
새로운 함수를 만들어서 axios를 사용한 뒤 componentDiDMount에서 this.newFunction()같이 불러와도 됨.

Axios를 사용할 땐 데이터 가져오는 시간을 기다려 줘야 하기 때문에 Async / Await를 사용해줘야 함.

await axios.get("ulr")로 사용하면 됨.
axios로 받아온 데이터 Array 를 state에 사용하려면 state에 data:[]빈 array를 우선 만들어준 다음 this.setState({data:data, ...})방식으로 전달하면 끝!