Function 컴포넌트

• State 사용 불가
  • useState로 사용해야함
• Life Cycle 사용 불가

Class 컴포넌트

• State 사용 가능
• Life Cycle 사용 가능

Life Cycle

컴포넌트의 생성(Mount)부터 변화(Update), 소멸(UnMount)까지의 전 과정

Mount

컴포넌트 생성

1. Constructor

// constructor : 생성자
// 렌더링 전 호출 / 초기 state 설정
// -> 초기 state값 설정
// -> 화면 렌더링 전, 가장 첫번째 단계

// super()를 반드시 사용해야 한다.

constructor() {
	console.log('constructor');
	super();
	this.state = {
		text : 'Hello Wolrd!',
		num : 0
	}
    // 함수 사용 시 이곳에서 bind()를 사용한다.
    // this.increaseNum = this.increaseNum.bind(this)
}

this?

컴포넌트의 render()함수가 실행되면 DOM이 그려진다
이때 this 는 component 내부에서 선언한 method 객체를 가리키는 것이 맞지만
event handler함수가 호출될 때의 this는 component 내부에서 선언한 method 객체를 가리키는 것이 아닌 전역객체(Window) 를 의미한다
왜냐하면 this 라는 값은 호출하는 문맥(context) 에의해 좌우되는데 클릭이 실행되는 문맥이 바로 전역(window)객체이기 때문

bind()?

bind 함수는 바인드하는 함수에서 사용하는 this의 대상을 지정해주는 역할을 한다

const objA = {
  name: 'a',
  aFunc: function() {
    console.log(this.name)
  },
}
const objB = {
  name: 'b',
}
objA.aFunc() // 예상대로 a가 출력
objA.aFunc.bind(objB) // objA 객체의 aFunc 함수에서 bind(objB)를 호출. bind 메서드에 전해진 인자는
					  // 복사된 바인딩 함수의 this 로 전달. 즉, aFunc 함수내의 this가 objB가 된다.
const foo = objA.aFunc.bind(objB) // 바인드 함수를 변수에 할당
foo()
4
// b

• 즉, 원본 aFunc 함수와 동일한 기능을 하는 바인딩된 새로운 함수가 만들어 진다

Update

컴포넌트 정보를 업데이트

• state 변경
• props 변경
• 부모 컴포넌트 리렌더링

2. render

render() {
	console.log('render');
	// render : 렌더링
    // -> 화면을 구성하는 요소를 작성 */
    return (
    	<div>
        	<p>{this.state.text}</p>
        	<p>{this.state.num}</p>
        	<button>+1</button>
        </div>
    )
}

3. componentDidMount

// componentDidMount : 렌더링 직후
// -> 첫 화면 구성 완료
// -> DOM접근, API Call

4. componentDidUpdate

// componentDidUpdate : 리렌더링 직후
// -> 화면 구성 완료
// -> DOM접근, 변경 값 확인 */

UnMount

컴포넌트 소멸

Axios

브라우저, node.js를 위한 Promise 기반 HTTP 비동기 통신 라이브러리

// 1. 설치

npm i axios

// 2. import
import axios from 'axios'

// 3. 사용
axios.get(통신할 주소)
.than(() => {
	// 통신 성공 시 실행 할 코드 작성
})
.catch(() => {
	// 통신 실패 시 실행 할 코드 작성
})

Hook

React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이,
state와, Effect등 여러 React 기능을 사용할 수 있도록 만든 라이브러리
함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다.
함수 컴포넌트는 클래스 컴포넌트와 다르게, 모듈로 활용하기가 쉬우므로
서로의 장점을 전부다 가지고 있다.

useEffect

함수형 컴포넌트에서 Life Cycle 기능을 사용할 수 있게 해주는 리액트 Hook

useEffect(callback, deps)

// callback : 실행 함수
// deps : 의존성 배열
// 배열의 형태에 따라 실행 방식이 달라진다.

배열의 형테에 따라 실행 방식이 달라진다?

1. 배열 생략 : 렌더링 될 때마다 (Mount, Update) 실행된다.
2. 빈 배열 : 첫 렌더링 때만 (첫 Mount) 실행된다.
3. 변경을 확인할 값이 있는 배열 : 첫 렌더링과 배열에 들어있는 값에 변경이 생길 때만
   (첫 Mount, Update) 실행된다.