본문 바로가기
IT/React

React - 컴포넌트란?

by 최고영회 2019. 2. 22.
728x90
반응형
SMALL

이전글: 2019/02/13 - [IT/React] - React란? React 소개


컴포넌트란?

 - 기능을 단위별로 캡슐화하는 리액트의 기본 단위다. 

 - 사용자가 보는 뷰는 이 컴포넌트들을 조합하여 만든다.

 - 자바스크립트 함수 혹은 클래스이며 속성들을 이력받아들이며 내부적으로 각자의 상태를 관리한다.


리액트 라이브러리?

 - 리액트 코어 라이브러리는 react-dom과 react-natvie 의 지원을 받아 구동하게 된다. 

 - react-dom: 브라우저나 서버 환경에서 렌더링을 수행

 - react-native: iOS나 안드로이드용 애플리케이션 개발 시 바인딩 제공


컴포넌트 만들기

 - 디자인을 살펴보고 어떻게 컴포넌트를 나눌것인지 기획한다.

 - API 가 애플리케이션에 어떤 데이터를 제공해 주는지 파악한다. 

   * API 란 서버에서 제공하는 인터페이스를 말하며 흔히 사용되는 REST 형식의 JSON API 가 가장 일반적이다. 

   * 보통 서버 파트에서 B/L을 처리하고 데이터를 가공하여 Front-End로 넘겨주는데 REST 형식의 JSON으로 많이 한다.

 - 컴포넌트는 DOM요소들처럼 중첩할 수 있으며 다른 컴포넌트를 포함할 수도, 옆에 배치할 수도 있다.


컴포넌트 만드는 연습

 - 컴포넌트를 적절하게 그룹화 하자. 

 - 컴포넌트는 서로 관련된 기능을 제공하는 것들로 구성해야 한다. 

 - 컴포넌트를 자유롭게 배치하기 어렵다면 아마도 계층 구조를 너무 견고하게 정의 했을 가능성이 있다. 

 - 인터페이스의 어떤 요소가 여러 번 반복되어 나타난다면 이런 요소들은 컴포넌트로 정의하면 좋다.


다음글:  2019/02/23 - [IT/React] - React - 리액트 요소란?


728x90
반응형
LIST

'IT > React' 카테고리의 다른 글

React - 상태 (기본)  (0) 2019.03.03
React - PropTypes (유효성 검사)  (0) 2019.03.03
React - 리액트 클래스 (상태가 있는 컴포넌트)  (0) 2019.02.23
React - 리액트 요소란?  (0) 2019.02.23
React란? React 소개  (0) 2019.02.13