React 컴포넌트 간의 관계와 데이터 교환 #2
Description
Question에 대해 상세 내용을 적어주세요
React에서 컴포넌트의 관계는 부모-자식 관계가 있다
extends와 implements가 아닌 이상 이 관계는 Angular에서 개념과 동일하다.
class TopComponent extends Component {
render() {
return (
<div>
상위 컴포넌트
<BottomComponent/>
</div>
);
}
}
export default TopComponent;
class BottomComponent extends Component {
render() {
return (
<div>
하위 컴포넌트
</div>
);
}
}
export default BottomComponent;이런 식으로 작성하게 되면 TopComponent는 BottomComponent의 부모 컴포넌트가 된다.
JSX에서 마치 HTML의 tag와 같이 해당 컴포넌트를 입력하게 되면 부모-자식 관계가 성립된다.
React에서는 데이터 교환이 두가지 방법이 있다.
첫번째는 정적인 방법인 props이고
두번째는 동적인 방법인 state이다.
먼저 첫번째 방법인 props는 부모 컴포넌트에서 자식 컴포넌트에게 값을 넘겨줄때 사용한다.
class TopComponent extends Component {
render() {
return (
<div>
상위 컴포넌트
<BottomComponent name="test1" subName="test2"/>
</div>
);
}
}
export default TopComponent;
class BottomComponent extends Component {
render() {
return (
<div>
하위 컴포넌트
{this.props.name} <br/>
{this.props.subName}
</div>
);
}
}
export default BottomComponent;물론 object도 넘길수 있다.
class TopComponent extends Component {
// object parameter
testObj = {
name: 'object'
}
render() {
return (
<div>
상위 컴포넌트
<BottomComponent name={this.testObj} subName="test2"/>
</div>
);
}
}
export default TopComponent;
class BottomComponent extends Component {
// props 내부의 name으로 전달된 object에서 name 꺼내옴
showNameTextInObj() {
return this.props.name['name'];
}
render() {
return (
<div>
하위 컴포넌트
{this.showNameTextInObj()} <br/>
{this.props.subName}
</div>
);
}
}
export default BottomComponent;원하는 적용 방안을 설명해주세요.
사실상 props를 쓸 일은 데이터 조회후 변경이 일어나지 않을때 (리스트 등)
이와 관련된 이슈가 있습니까?
x
적용될때 어떠한 부수효과가 발생할 수 있습니까?
x