Introduction
Using React subcomponents is a practice of using multiple components in a component to break down a complex hierarchy into small, independent, and reusable components. These subcomponents can be configured to handle events and data via props. “Props” stands for properties, and are a React feature that passes data between components as an immutable key-value pair object.
리액트 하위 컴포넌트 사용은 작고, 독립적이고, 재사용가능한 컴포넌트들로 복잡한 계층을 세분화하기 위해서 컴포넌트에서 여러 컴포넌트를 사용하는 방법이다.
하위컴포넌트는 props 를 통해 이벤트와 데이터를 처리하도록 구성할 수 있다. Props는 Properties를 의미하며, 불변 키-값 쌍 객체로써 컴포넌트 사이에 데이터를 전달하는 리액트의 기능이다.
Implementing subcomponents is quite easy, but sometimes it can be tricky to retain the context with the use of anonymous functions or React classes. This guide covers the implementation of subcomponents with anonymous and ES6 features in React.
하위컴포넌트 구현은 꽤 쉽지만, 때때로 익명 함수나 리액트 클래스를 사용하여 컨텍스트를 유지하는 것은 까다로울 수 있다.
리액트 컴포넌트에서 이벤트 구현
리액트 클래스 컴포넌트는 Component 클래스를 확장해서 만들 수 있고, 클릭을 처리하는 함수로 onClick 이벤트를 구현할 수 있다.
<button onClick={this.handleClick}> Click </button>
TypeScript
복사
위의 스니펫에서, handleClick 함수는 버튼이 클릭될 때마다 트리거된다. 거기에 this로 handleClick을 바인드하는 것은 필요하지 않다. 왜냐하면 handleClick은 어떤 것도 접근하지 않는다. 그 컨테이너인 App component로부터
다시 말해서, 거기에 에러가 있을 수 있다. 왜냐하면 this는 런타임에 window 객체를 가리키기 때문이다. App이 아니라.
하위컴포넌트로 이벤트 핸들러 전달
하위컴포넌트는 class나 functional 컴포넌트 둘중 하나로 구현할 수 있다. 이 구현은 fc로 최적화될 수 있다. Address 하위컴포넌트는 props를 통해 details를 받을 것이다. .container 컴포넌트로부터
function Address({ type, houseNo, clickHandler }) {
const isPermanent = type && type === 'Temporary';
return (
<div>
<b>{type}</b>
<p>{houseNo}
{' '}
{isPermanent ? <button onClick={clickHandler} title='Delete'>X</button> : ''}
</p>
</div>
)
}
TypeScript
복사
Address 컴포넌트는 props 값들을 직접적으로 전달하기 위해서 디스트럭쳐링 할당인 { type, houseNo, clickHandler }를 사용하고 있다. clickHandler 는 onClick 어트리뷰트로 전달되서 클릭을 처리하는 함수다.
App 컴포넌트는 주소들의 데이터를 저장하는 state 를 사용하고 removeTempAddress 함수는 오직 permanent 객체로 addresses 객체의 값을 리셋할 수 있다.
export default class App extends Component {
// set the values for the addresses in state object
state = {
addresses: {
permanent: {
houseNo: 'ABC',
},
temporary: {
houseNo: 'XYZ',
}
}
}
// an arrow function to retails the context of this
removeTempAddress = () => {
const { permanent } = this.state.addresses;
// reset value of 'addresses' to 'permanent' only
this.setState({ addresses: { permanent } })
}
render() {
const { permanent, temporary } = this.state.addresses;
return (
<div className="container">
<Address type='Permanent' houseNo={permanent.houseNo} />
{temporary && <Address type='Temporary' houseNo={temporary.houseNo} clickHandler={this.removeTempAddress} />}
</div>
);
}
}
TypeScript
복사
이벤트 핸들러를 props로 전달하는 것은 컨테이너 컴포넌트에 이벤트를 처리하는 제어권을 주고, 재사용가능한 컴포넌트를 만드는 것을 돕는다.
런타임에 하위컴포넌트 구현
하위컴포넌트들을 런타임에 생성하는 것은 dynamic UI를 위한 공통 요구사항이다.
종종 UI는 데이터 항목의 목록에서 변화마다 렌더/업데이트를 해야만 한다. 예를 들어, 카트에서 항목을 보여주는것, 주식에서 tabular(표 형식) 데이터 등. 데이터의 동적인 사이즈 때문에, 그 해결책은 항목들을 생성하는 동안 항목을 반복하는 것이다.
배열 map을 사용하는 것은 처리를 위해 데이터 값들을 반복하기 위한 일반적인 메서드다. 그것은 배열의 요소들을 처리하기 위한 익명 함수를 가진다. 그리고 화살표 함수를 익명함수 안에서 context(App)에 접근할 수 있다.
export default class App extends Component {
state = {
items: ["Banana", "Mango"],
};
handleClick(event) {
console.log(event.target.innerHTML);
}
render() {
var listItems = this.state.items.map((item, index) => {
return <li key={index} onClick={this.handleClick}><a href='/#'>{item}</a></li>;
});
return (
<div className="container">
<ul>{listItems}</ul>
</div>
);
}
}
TypeScript
복사
화살표 함수의 사용은 context를 유지하면서 this.handleClick으로 접근을 제공한다. 달리 말해서, map 은 context를 유지하기 위한 인자로써 this를 가진다.
var listItems = this.state.items.map(function (item, index) {
return <li key={index} onClick={this.handleClick}>
<a href='/#'>{item}</a>
</li>;
}, this); // this as second argument to map function
TypeScript
복사
이것은 또한 bind를 사용할 수 있다.
var listItems = this.state.items.map(function (item, index) {
return <li key={index} onClick={this.handleClick}>
<a href='/#'>{item}</a>
</li>;
}.bind(this)); // binding this with anonymous function
TypeScript
복사
결론
하위 구성요소는 재사용 가능한 요소를 만들고 props을 통해 이벤트와 데이터를 전달할 수 있는 좋은 방법입니다. 런타임에서 이것은 기본적으로 window 객체를 가리키며, 화살표 함수, 이를 전달하기 위한 오버로드 메소드, 바인드 메소드를 통해 동적 하위 컴포넌트의 컨텍스트를 보존하는 많은 방법이 있다. 바라건대, 이 가이드가 서브 컴포넌트를 만들기 위해 필요한 세부 사항을 다양한 방식으로 설명하였으면 합니다.
