클래스간에 데이터 전달 (상위-> 하위, 하위-> 상위)in react

react 개발시 컴포넌트간에 데이터 전송은 중요합니다. 특히 cra(create-react-app)와 같은 단일 thread에서 매우 중요합니다.

 

그래서 오늘은 위해 상위 -> 하위, 하위 -> 상위 컴포넌트간 데이터 전달 방식을 익혀볼까 합니다.

 

상위 -> 하위

 

class 상위 extends Component {

render() {
	let data = 1
	return(
    	<하위  data={this.data}/>
    );
}

}

class 하위 extends Component {

render() {
	console.log(this.props.data)
    // 1이 찍힙니다
	return(
    	<div>하위 컴포넌트</div>
    );
}

}

 

위 코드와 같이 상위 컴포넌트에서 하위로 데이터를 전송해주려면 props를 지정해주면 됩니다.(이때 map함수를 이용해 여러 하위 컴포넌트를 부를경우 key값 설정도 잊지마세요!)

 

 

 

하위 -> 상위

class 상위 extends Component {

	goHawee = (res) => {
    	console.log(res)
    }

render() {
	let data = 1
	return(
    	<하위  func={this.goHawee}/>
    );
}

}

class 하위 extends Component {

render() {
	this.props.func(1)
    // 1이 찍힙니다
	return(
    	<div>하위 컴포넌트</div>
    );
}

}

 

상위에서 props로 함수를 전달해주면 끝!입니다. 하지만 하위에서 상위로 데이터를 보내는 거 같지 않죠?

그렇다면 하위 데이터로 상위 컴포넌트의 state을 변경해보겠습니다.

 

class 상위 extends Component {

constructor(props) {
    super(props);
    this.state = {
        data: {}
    };
  }
  

	goHawee = (res) => {
    	this.setState({
        data:res
        }, () => {
        console.log(this.state)})
        //{data: "test"} 가 찍힙니다
    }

render() {

	return(
    	<하위  func={this.goHawee}/>
    );
}

}

class 하위 extends Component {

render() {
	let test = "test"
	this.props.func(test)
   
	return(
    	<div>하위 컴포넌트</div>
    );
}

}

 

했더니 아래와 같이 에러가 뜹니다.

이는, this.props.func(test)의 위치때문인데요. 저는  무한 루프를 피하기 위해 특정함수에 넣고 onClick시 이를 실행하도록 했습니다.

 

class 상위 extends Component {

constructor(props) {
    super(props);
    this.state = {
        data: {}
    };
  }
  

	goHawee = (res) => {
    	this.setState({
        data:res
        }, () => {
        console.log(this.state)})
        //{data: "test"} 가 찍힙니다
    }

render() {

	return(
    	<하위  func={this.goHawee}/>
    );
}

}

class 하위 extends Component {

	clickedFunc = () => {
    	let test = "test"
		this.props.func(test)
    }
render() {

   
	return(
    	<div onClick={this.clickedFunc}>하위 컴포넌트</div>
    );
}

}

 

 

잘나오네요ㅎㅎ

 

요약:

@ 상위 -> 하위시, props로 데이터 전달

@ 하위 -> 상위시, props로 실행할 함수를 하위로 전달하고 하위에서 실행. 이때 무한루프에 빠지지 않도록 주의한다.

 

이상입니다!

 

코드 보기가 어려우시면 이링크를 참조해주세요

: https://medium.com/%EB%8F%84%EA%B9%A8%EB%B9%84-%EC%9D%B4%EC%95%BC%EA%B8%B0/%ED%81%B4%EB%9E%98%EC%8A%A4%EA%B0%84%EC%97%90-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EB%8B%AC-%EC%83%81%EC%9C%84-%ED%95%98%EC%9C%84-%ED%95%98%EC%9C%84-%EC%83%81%EC%9C%84-in-react-309024503ee0