[리액트(React) Study Log] [Person App-012] Passing Method References Between Components

[리액트(React) Study Log] [Person App-012] Passing Method References Between Components

 

1. 자식 component 에서 부모 component 의 state 를 조작할 수 있는가? Yes

 - 부모 component 가 자신의 state 를 조작하는 click event 함수를 만들어서 자식 component 에 props 로 전달해주면 됨. 즉, method reference 를 component 간에 전달해줄 수 있으며, 그렇게 함으로써 다른 component 가 가진 함수를 사용하거나 그 함수를 이용해서 다른 component 의 state 값을 조작할 수 있음.

 

2. Person component 의 element 에 부모 component 의 button 과 같은 기능(change name)을 부여하기

 - 두번째 사람인 Lina 가 포함된 문장에 click method 를 전달 --> 문장 클릭시 name 변경됨.

// src-App.js

 

...

        <Person

          name={this.state.persons[1].name}

          age={this.state.persons[1].age}

          click={this.switchNameHandler}> Nice to meet you.</Person>

...

 

export default App;

 

 - click props 를 onClick 이벤트의 callback 함수로 지정.

//src-Person-Person.js

 

...

            <p onClick={props.click}>I'm a {props.name} and I am {props.age} years old!</p>

...

 

export default person;

 

3. component 간 method 전달시 data(argument) 전달하기

 - 전달하고자 하는 argument 를 함수 정의에 parameter 로 정의. (newName)

switchNameHandler = (newName) => {

    // console.log('Was clicked!');

    // Do Not Use : this.state.persons[0].name = 'David';

    this.setState({

      persons: [

        { name: newName, age: 25 },

        { name: 'Lina', age: 25 },

        { name: 'Nick', age: 25 }

      ]

    })

  }

 

 - 하위 component 에 newName 전달 (두 가지 방법 있음)

1) 일반 함수 문법으로 two way binding 사용하면서 this 를 bind함과 동시에 argument 전달

 - 일반 함수 문법에서의 this 는 해당 class object 를 의미하지 않기 때문에 this 와 binding 이 필요함.

onClick={this.switchNameHandler.bind(this, 'AAA!')}

 

2) 화살표 함수를 익명 함수(anonymous function) 형태로 정의하면서 argument 전달

 - 화살표 함수 문법에서는 this 가 해당 class object 자신을 의미하므로 this binding 필요 없음.

 - 사용이 더 간단하기는 하지만 re-rendering 이 과하게 일어나서 성능 저하 이슈가 생길 수도 있으므로 가능하면 1번 two way binding 을 사용하는게 좋음.

onClick={() => this.switchNameHandler(AAA!')}