React 기본용어

컴포넌트 (Component )

• 리액트로 만들어진 앱을 이루는 최소환의 단위
• 데이터(Props)를 입력받아 View(State) 상태에 따라 DOM Node를 출력하는 함수
• React에서 정의하는 컴포넌트 종류는 크게 함수형, 클래스형 컴포넌트 2가지가 있다.

 

함수형 컴포넌트 (Stateless Functional Component)

• 가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성할 수 있다.
• 메모리 자원을 함수형 컴포넌트보다 적게 사용한다.
• State, lifeCycle 관련 기능 사용 불가능 (Hook을 통해 사용 가능)

 

클래스형 컴포넌트 (Class Component)

• 임의 메소드를 정의 할 수 있다.
• 메모리 자원을 함수형 컴포넌트보다 많이 사용한다.
• State, lifeCycle 관련 기능 사용 가능

State

• 컴포넌트 내부에서 바뀔 수 있는 값
• 함수형 컴포넌트에서는 useState 함수로 State를 사용한다.

 

Props (Properties)

• 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용
• 하위 컴포넌트는 읽기 전용인 데이터 이다.

DOM (Document Object Model)

• 문서 객체 모델은 HTML문서나 XML문서에 접근하기 위한 일종의 인터페이스
• HTML과 스크립트 언어를 이어주는 역할
• 가상 DOM은 실제 DOM의 사본