빗썸아카데미[프론트앤드] - React life-cycle & SPA & bind

빗썸 4일차 수업

export default keyword

  • 다른 문서에서 참조할 때 필요

react life-cycle

  • constructor (초기 생성)

    • 자동 호출이 된다.
    • 컴포넌트 생성자 함수로 컴포넌트가 새로 만들어질 때 마다 호출됨
      constructor(){super();}
      생성자 안 state 선언할 때 this 사용
  • componentWillMount() (초기 생성)

    • 컴포넌트가 화면에 나타나기 직전에 호출되는 API
      componentWillMount(){자동호출}
  • componentDidMount() (초기 생성)

    • 컴포넌트가 화면에 나타난 후 호출되는 API
      componentDidMount(){자동호출}
  • shouldComponentUpdate(nextProps, nextState) (업데이트)

    • 갱신 / 수정 / 조회
    • 컴포넌트 최적화 작업에서 유용한 API
  • componentDidUpdate(nextProps, nextState)

    • 갱신 / 수정 / 조회
    • shouldComponentUpdate가 true로 반환했을 경우 호출
  • componentDidCatch(err,info)

    • render 함수 안에서 에러가 발생될 때 호출

SPA (single page applicatioin)

- life-cycle
    변경된 형태만 JSON 형태로 받게 된다.
    서버가 데이터를 JSON 형태로 전송
- View는 하나이고 Component로 제작
- 장점
    - 안정적인 속도
- 단점
    - 첫 로드 속도가 느림
- 관련 기술
    - Angular / Vue / React

Virtual DOM

  • 기존은 MVVM MVC ,,, 다양한 디자인 패턴
    • 이벤트로 데이터가 변해 실제 브라우저가 DOM 을 넣음
  • 서비스 로직의 양방향 바인딩을 통해 서로 모델의 값이 동기화
  • 변경된 부분만 업데이트

bind 함수

  • event 함수 뒤에 bind 함수를 붙였는데 없어도 오류는 안나지만 이벤트가 일어나지 않는다.
  • 이벤트 메소드를 연결해주는 중요한 함수이다.
  • event와 prop에서 보낸 데이터를 연결해준다.

e.preventDefault()

  • 기본 default 함수가 활성화가 된 함수를 막는다.
  • 이동은 되지만 갔다가 되돌아 온다 (SPA 원리 때문에)

좋은 웹페이지 즐겨찾기