0605 TIL
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, ...})
방식으로 전달하면 끝!
Author And Source
이 문제에 관하여(0605 TIL), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@313yang/0605-TIL저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)