[06]2022.07.23

Rio·2022년 7월 24일
0

React

목록 보기
7/8
post-thumbnail

리엑트 LifeCycle

분류

생명 주기는 크게 3개로 분류한다.
1. 생성 될 때
처음으로 컴포먼트를 불러와 실제 DOM에 생성하는 단계(=mount한다)
2. 업데이트 할 때
유저의 행동에 의해 DOM의 내용이 바뀌는 단계
3. 제거할 때
화면에서 컴포넌트가 제거될 떄(=unmount한다)

리엑트 Component

하나의 block이다.
리엑트 공식 홈페이지에서는 클래스형이 아닌 함수형 컴포넌트를 사용하라고 명시했다.
라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용가능하다.

클래스형 컴포넌트

  • state, lifeCycle 관련 기능 사용 가능
  • 메모리 자원을 함수형 컴포넌트보다 더 사용
  • 임의 메소드를 정의 가능
import React from 'react';
import './App.css';

function App() {
  const name = 'react';
  return <div className = "react">{name}</div>
}

export default App;

함수형 컴포넌트

  • state, lifeCycle 관련 기능사용이 불가능 => React Hook을 사용해 적용
  • 메모리 자원을 클래스형 컴포넌트보다 덜 사용
  • 컴포넌트 선언이 편리
import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>
  }
}

export default App;

State & Props

컴포넌트가 가지고 있는 데이터의 형태로 2가지가 있다.

State

Component가 가지고 있는 데이터이다.
state의 수정/생성을 자유롭게 가능하다.

Props

Component가 부모Component로부터 받아온 데이터이다.
부모의 State에서 받아온 정보를 말한다.
받아온 정보(=props)는 수정이 불가능하다.

profile
우당탕탕 개발 기록지

0개의 댓글