React Component

Jung taeWoong·2021년 5월 15일
react.js
0

React.js

목록 보기
2/19
post-thumbnail

React Components

  • 화면상에 보여지는 UI 단위
  • react library를 이용하여 component 설계방법으로 class, function이 있다.
  • 컴포넌트 이름은 항상 대문자로 시작하는 PascalCase 문법 사용을 권장
    - HTML 표준 요소와 구분하기 위해

재사용 가능한 컴포넌트를 만들어 놓는 것은 더 큰 앱에서 작업할 때 두각을 나타냅니다. UI 일부가 여러 번 사용되거나 (Button, Panel, Avatar), UI 일부가 자체적으로 복잡한 (App, FeedStory, Comment) 경우에는 별도의 컴포넌트로 만드는 게 좋습니다.

Class Component

  • react에서 제공하는 'Component Class'를 상속해서 만들 수 있다.
class MyComponent exnteds React.Component {
  state = {
    myState: 0,
  };
  render() {
    return <button>
      {this.state.myState}
      </button>
  }
}
  • component에 상태 데이터를 담을 수 있는 state Object가 있고 상태에 따라 동적으로 렌더링된다.
    - state가 변경이되면 render()가 호출이 되며 업데이트된 내용이 사용자에게 보여짐
  • lifecycle methods를 사용가능

Function Component

  • Javascript 함수와 유사하다. (단일책임원칙)
  • 컴포넌트 외부로부터 props를 전달 받아 어떻게 UI를 구성해야할지 설정하여 React 요소(JSX를 Babel이 반환 처리)로 반환
function App(props) {
  return <h1>{props.children}</h1>
}
  • state(상태)가 없고 항상 정적으로 데이터가 표기됨
  • lifecycle methods 없다.
  • React 16.8 ver 부터 React Hook이 도입이 됨

React Hook

  • facebook에서 권고하는 방식 react의 미래 방향
  • Function Component에서도 state와 lifecycle methods을 사용할수 있게 해준다.

React Hook이 도입된 이유

  1. class component 설계방식의 불편함
    • class 개념의 어려움
    • class this 작성의 불편함
    • class 함수를 이용할 때의 바인딩 이슈
  2. functional programming의 유행

React-dom

  • 브라우저에서는 html,css,js 파일만 이해할수 있는데 jsx파일들을 bable을 통해 순수 단일 JS파일로 만들어진 것을 html과 연결하는 작업을 해준다.
    - <div id="root">에 root component를 연결시켜줌
// index.html (최종 배포용 html)
<body>
  <div id="root"></div> // 달랑 div 태그 하나
</body>

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './app';

// ReactDom을 이용해 root element와 root component를 연결
ReactDOM.render(
  <React.StrictMode> // '엄격모드' 사용
  	<App />
  </React.StrictMode>
  document.getElementById('root');
);

CDD (컴포넌트 주도 개발)

컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스(UI) 구축에 도달하는 개발 및 설계 방법론
기본적인 단위부터 시작하여 UI 뷰(view)를 구성하기 위해 점진적으로 결합(조립)해가는 상향적(bottom-up) 성향을 뛴다
이 방법은 UI를 구축할 때 직면하게 되는 앱 규모의 복잡성을 해결한다.

  • 컴포넌트(components)
  • 컨테이너(containers, 2개 이상 컴포넌트 조합)
  • 페이지(pages, 2개 이상 컨테이너 조합)

왜 CDD인가?
UI는 애플리케이션 규모가 커짐에 따라 다루기 어려워진다.
규모가 큰 UI는 깨지기 쉽고 디버깅이 어려울 뿐더러 제작에도 많은 시간이 필요하다.
UI를 모듈식으로 세분화하여 견고하면서도 유연한 컴포넌트를 구성하면 이러한 문제를 해결할 수 있다.
컴포넌트는 애플리케이션 비즈니스 로직에서 상태를 분리하여 상호 교환을 가능하게 한다.

CDD 장점

항목설명
품질(Quality)독립적으로 컴포넌트를 분리하여 관련 상태를 정의하여 UI가 다양한 시나리오에서 작동하는지 확인 가능
내구성(Durability)컴포넌트 수준에서 테스트하여 세부 사항까지 버그를 정확하게 찾아낼 수 있다. 테스트보다 작업량이 적다.
속도(Speed)컴포넌트 라이브러리 또는 디자인 시스템의 컴포넌트를 재사용하여 UI를 보다 빠르게 조립 가능
효율성(Efficiency)UI를 개별 컴포넌트를 분해 한 다음 서로 다른 팀 구성원 간에 공유하여 개발 및 디자인을 병렬 처리 한다.

CDD가 아닌 UI 개발

페이지 기반

웹 사이트를 페이지 모음 정도로 취급하는 개발 및 디자인 프로세스
페이지에서 공통 요소를 재사용하기 위해 많은 노력을 기울이지 않는다.

페이지용으로 설계된 도구

Wordpress 또는 Drupal은 문서를 화면에 렌더링 하는데 중점을 둔 도구
Rails, Django 및 PHP와 같은 백엔드 프레임워크는 UI 재사용을 사후 고려사항으로 간주하고 광범위한 컴포넌트 재사용을 방지

상호 보완 트렌드

디자인 시스템

에셋(Figma, Sketch 등), 설계 원리, 컴포넌트 라이브러리를 포함하는 모든 UI 패턴 사용자, 인터페이스 설계에 대한 전체적인 접근 방식

애자일

짧은 피드백 루프와 빠른 반복을 촉진하는 소프트웨어 개발 방법
컴포넌트는 미리 만들어질 빌딩 블록을 다시 사용하여 팀이 보다 빨리 구축하는 것을 도와준다.
이를 통해 애자일 팀은 사용자 요구사항에 더욱 더 집중할 수 있다.

JAMStack

정적 파일을 사전 렌더링하고 CDN에서 직접 제공하는 웹 사이트를 구축하는 방법론
JAMStack 사이트 UI는 컴포넌트화 된 JS 프레임워크에 의존한다.

profile
Jung taeWoong
Front-End 😲
이전 포스트

React.js란..?

다음 포스트

JSX

0개의 댓글