제목: React Render() 안에서 map() 함수 내에서 함수 호출하기
소개
React에서 render() 메서드는 화면에 표시될 마크업을 생성하는 역할을 합니다. 종종, 우리는 컬렉션을 매핑하고 각 항목에 대해 동적 콘텐츠를 렌더링해야 합니다. 그러나 map() 함수 내에서 함수를 호출하는 것은 약간 까다로울 수 있습니다. 이 글에서는 React의 render() 메서드 내에서 map() 함수 안에서 함수를 호출하는 방법에 대해 알아보겠습니다.
문제 이해하기
map() 함수 내에서 함수를 호출하려고 할 때, “this.getItemInfo()은(는) 함수가 아닙니다”라는 오류 메시지가 발생할 수 있습니다. 이는 map() 함수 내에서 this의 범위가 React 컴포넌트가 아닌 Window 객체를 참조하기 때문에 발생합니다.
해결책: 화살표 함수
이 문제에 대한 효과적인 해결책은 map() 함수 내에서 일반 함수 대신 화살표 함수를 사용하는 것입니다. 화살표 함수는 주변 코드의 렉시컬 범위, 즉 컴포넌트의 this 참조를 상속합니다.
collection.map((item) => {
return (
<div> {item.Name} {this.getItemInfo(item)} </div>
);
})화살표 함수 구문을 사용함으로써, 함수 내에서의 this 참조가 올바른 범위인 React 컴포넌트를 가리키도록 보장할 수 있습니다.
함수에 접근하기
이전의 해결책에서는 getItemInfo() 함수가 React 컴포넌트 내에서 정의되었다고 가정합니다. 함수에 접근할 수 있도록 하기 위해, 해당 함수를 클래스 메서드로 선언할 수 있습니다:
getItemInfo(item) {
return `${item.Something} ${item.SomethingElse}`;
}React 컴포넌트의 클래스 내에서 getItemInfo() 함수를 정의함으로써, 해당 함수는 컴포넌트의 메서드의 일부가 되며, render() 메서드 내에서 문제 없이 호출할 수 있습니다.
올바른 “this” 참조 사용하기
화살표 함수 구문을 사용하더라도, this 참조는 여전히 혼동을 일으킬 수 있습니다. 일부 경우에는 함수를 명시적으로 컴포넌트의 this 참조에 바인딩해야 할 수도 있습니다.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.getItemInfo = this.getItemInfo.bind(this);
}
getItemInfo(item) {
return `${item.Something} ${item.SomethingElse}`;
}
render() {
return (
<div className="someDiv">
{collection.map((item) => (
<div> {item.Name} {this.getItemInfo(item)} </div>
))}
</div>
);
}
}컴포넌트의 생성자에서 .bind(this) 메서드를 사용하여 getItemInfo 함수를 바인딩함으로써, this 참조가 올바르게 컴포넌트 인스턴스에 바인딩되도록 보장할 수 있습니다.
결론
React의 render() 메서드 내에서 map() 함수 내에서 함수를 호출할 때, this 참조의 범위를 고려하는 것이 중요합니다. 화살표 함수를 사용하거나 함수를 명시적으로 바인딩함으로써, 함수가 React 컴포넌트의 올바른 문맥 내에서 호출되도록 할 수 있습니다. 이렇게 하면 “함수가 아님” 오류를 피하면서 동적 콘텐츠를 성공적으로 렌더링할 수 있습니다.
참고 자료 :
같은 카테고리의 다른 글 보기 :
