React 학습 - 비즈니스 모듈 분리
[React 학습] 비즈니스 내 모듈 분리
홈페이지의 예에 따르면React프로그래밍사상props는 부급에서 자급으로 데이터를 전달하는 방식이다.
Example
상위 레벨:
var FilterableProductTable = React.createClass({
render: function(){
return (
<div>
<SearchBar />
<ProductTable products={this.props.products} />
div>
)
}
});하위 레벨:
var ProductTable = React.createClass({
render: function(){
var rows = [];
var lastCategory = null;
this.props.products.forEach(function(product){ // this.props.products
if(product.category !== lastCategory){
rows.push(
//
)
}
rows.push(
<ProductRow product={product} key={product.name} />
);
lastCategory = product.category;
});
return (
<table className="productTable">
<thead>
<tr>
<th>Nameth>
<th>Priceth>
tr>
thead>
<tbody>{rows}tbody>
table>
)
}
}); 홈페이지 예시에 따라 쓴 코드(codepen)
height="265"scrolling="no"title="LWbYKY"src="//codepen.io/ziazan/embed/LWbYKY/?height=265&theme-id=0&default-tab=js,result&embed-version=2"allowfullscreen="true">See the Pen LWbYKY by ziazan ( @ziazan ) on CodePen .수확
UI에 따라 모듈을 분할할 때 데이터 모델에 따라 분할합니다.코드를 작성할 때, 비교적 간단한 예에서, 통상적으로 위에서 아래로 내려가는 것은 좀 쉽지만, 더 큰 프로젝트에서는 아래에서 위로 구축하는 것이 더욱 쉽다
-FilterableProductTable(전체)-SearchBar(검색 상자 입력)-ProductTable(표시된 데이터 테이블)-ProductCategoryRow(분류명/목록 헤더)-ProductRow(각 행의 상품)
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
NextJS에서 환경 변수(.env) 설정내 환경 변수가 작동하지 않습니다 😱😱😱 이 상황에서 .env 파일을 사용하여 NextJS 앱에서 개발하는 동안 API URL 또는 비밀 키를 숨기고 싶을 수 있습니다. Next.js에서 환경 변수를 어떻게 사용합니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
