react 주요 개념

1. 컴포넌트 Component

리액트 앱을 이루는 최소화 단위, 입력(props)을 받아 출력(Element) 하는 역할

• 재사용 가능, 코드 양 줄임, 개발 시간 줄임, 유지보수 쉬움
• 붕어빵에 비유를 많이 하는데 붕어빵틀이 component, 붕어빵 재료가 props, 최종 나오는 붕어빵이 Element된다.

 

2. JSX

const element = <h1>Hello, world!</h1>;

• javaScript + XML
• 필수 사용은 아니지만 JS 코드 안에서 UI 관련 작업을 할 수 있기 때문에 시각적으로 더 도움이 된다

3. 라이프 사이클

리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리라 각 컴포넌트의 수명 주기가 존재한다. 라이프 사이클은 컴포넌트가 실행되거나, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 것. 

• 생성될 때 (마운팅) 
  • DOM이 생성되고, 웹 브라우저 상에서 나타나는 것
• 업데이트 될 때 (업데이팅)
  • Props가 바뀔 때, State가 바뀔 때, 부모 컴포넌트가 리렌더링될 때
• 제거할 때 (언마운팅)
  • DOM에서 제거

 

4. Props (Properties)

컴포넌트에 전달되는 읽기 전용 속성으로 눈에 보이는 글자나 색상 등의 속성을 바꾸고 싶을 때 사용

• 상위 컴포넌트가 하위 컴포넌트에 값 전달할 때 사용 (단방향 데이터 흐름) 
• 수정x 

 

5. state (상태)

• 컴포넌트 속성값을 저장, 변경할 수 있는 객체
• 컴포넌트의 메모리 

6. SPA (SinglePageApplication) 

• 한개의 페이지로 이루어진 애플리케이션
• 변화가 필요한 부분만 js 및 데이터 api 호출로 업데이트

 

 

 

참고 

React.js - JSX란?(정의, 장점, 문법, 특징 등)

 

[React] 리액트 라이프 사이클