React 컴포넌트 간의 관계와 데이터 교환

[polycompo]

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

[seongbin9786]

👍

1. 내용이 거의 다 맞는데요, extend -> extends여야 합니다!

2. props가 readonly인 이유는 React Component가 Props에 대한 순수 함수여야 하기 때문입니다.(React 공식문서에서 그렇게 정의함) [참고 1 - 리액트 영문 문서]를 참고해보세요 :)

3. 가끔 props에 기반한 값으로 state를 설정해야 하는 때가 있습니다. initValue로 props를 정의해 constructor와 componentDidUpdate()에서 state로 저장한 후 변경하는 방법이 있고요(둘 다 한 번 씩 더 렌더링되서 안티패턴이라고 불립니다), getDerivedStateFromProps라는 Lifecycle Callback Method를 사용하는 방법도 있습니다. 후자가 훨씬 낫고요, 16.5(저희는 16.6 사용중)부터는 전자의 방법으로 하면 warning이 뜬다고 하는데 해본 적은 없네요. [참고 2 - Velopert님 블로그] [참고 3 - 리액트 영문 문서]

[polycompo]

@seongbin9786
감사합니다.
저는 props도 object형을 넘겼을때 참조값위주로 전달해서 내부를 수정하면 강제적으로 변경이 가능할 줄 알았습니다.(javascript object 특성을 사용)
props를 기반한 값으로 state를 설정하려면 생성자에서 따로 바인드 해서 하는 방법을 사용하던데 이것은 좀더 찾아봐야겠습니다.
아무래도 대부분 props를 기반한 값으로 state를 설정해야할 때가 많아질 것 같아서(공통 컴포넌트 생성시) 물어본것이였습니다.