React 개념 정리

jiwon·2019년 11월 19일
0

React 뿌수기

목록 보기
1/1
post-thumbnail

What is React?

  • 사용자 인터페이스를 구축하기 위한 선언적 / 효율적 / 유연한 JavaScript 라이브러리
  • virtual DOM, 말그대로 가상의 Documenthtml 문서에 추가하고 뺀다.

Component (컴포넌트)

1. 컴포넌트 종류

  • react는 여러 종류의 컴포넌트 가짐
    • 함수 컴포넌트 VS 클래스 컴포넌트
      • 함수 컴포넌트
      • 클래스 컴포넌트
        • 상속개념 이해하기 : React 컴포넌트 클래스는 생성자를 가질 때 super(props) 호출 구문부터 작성

2. 컴포넌트 특징

개별 컴포넌트는 props라는 매개변수를 받아오고 render 함수를 통해 표시할 뷰 계층 구조를 반환

  • render : 렌더링할 내용을 경량화한 React 엘리먼트를 반환
    • <div /> 구문은 빌드하는 시점에서 React.createElement('div')로 변환
  • 컴포넌트 Life Cycle
    • Mounting
      • constructor
      • render
      • componentDidMount
    • Update
      • render
      • componentDidUpdate
    • Unmount
      • componentWillUnmount

State, Props

  • state : 무언가를 “기억하기”
    • state가 바뀌면 다시 rendering
    • state 끌어올리기
      • 여러개의 자식으로부터 데이터를 모으거나 두 개의 자식 컴포넌트들이 서로 통신하게 하려면 부모 컴포넌트에 공유 state를 정의해야 합니다.
    • 데이터 값 변경하기
      • 불변성 : 직접 변경하지 않기!
        • 이력 남기기 : 이전으로 되돌아가기 기능
        • 변화 감지 : 실제 객체와 사본 비교하여 변화 감지

참고 자료 및 추천 리소스

profile
안녕하세요 양지원입니다

0개의 댓글