props와 ref를 통한 컴포넌트간 연동

리액트는 화면들을 각각 컴포넌트로 나눠 만들고

그것들을 import 하여 화면을 구성할 수 있다.

 

각각 화면별로 기능들이 존재하니 메소드나 데이터가 화면별로 존재할거고

하나의 화면에서 보여야하기 때문에 연동되는 것처럼 구현하는 것은 꼭 필요할 것으로 생각된다.

 

내가 이번에 개발한 방식은

할아버지 컴포넌트 -> 부모컴포넌트 import

부모컴포넌트 -> 자식컴포넌트 import 하여 화면을 구성했다.

 

그렇다 보니 서로서로 메소드나 데이터를 공유해야하는 상황이 반드시 필요해졌다.

이럴때 내가 확인한 방식이 바로 props와 ref다.

 

쉽게 설명하자면

props는 내가 할아버지에서 자식컴포넌트까지 원하는 메소드나 데이터를 넘겨주는 것이다.

// 이것은 A 컴포넌트입니다.
import B from './path'

testFunc = () => {}

state = {aa:'aa', bb:'bb'}
<B aa={this.state.aa} testFunc={this.testFunc} />




// 이것은 B 컴포넌트입니다.
import C from './path'

const data = this.props.aa
const fucnResult = this.props.testFunc()
<C aa={this.props.aa} testFunc={this.testFunc} />



// 이것은 C 컴포넌트입니다.

const data = this.props.aa
const fucnResult = this.props.testFunc()
console.log(data)

위와 같이 컴포넌트를 사용할때 원하는 변수와 그 데이터를 같이 넘겨주면

자식에서 this.props에 해당 값이 담기게 된다. 메소드도 마찬가지

 

반대로 자식에서 할아버지로 올리고 싶은경우에 ref 를 사용할 수 있는데

import B from './path'

bRef = React.creatRef();

<B bref = {this.bref}>




// 이것은 B 컴포넌트입니다.
testFunc = () => {};

위 처럼 컴포넌트를 사용할때 생성한 ref 를 보내주게 되면

A컴포넌트에서 this.bref.current.testFunc로 B컴포넌트의 메소드를 사용할 수 있다

B에있는 메소드 => A로 (props와 역방향)