일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- 자바스크립트
- Express
- python
- React
- onChange
- malloc-lab
- 리액트
- 사용자 정의 객체
- html input
- javascript
- sw 정글
- dfsbfs
- Coding Test
- 프로그래머스
- 코딩테스트
- node.js
- 템플릿 문자열
- Spring
- 자바스크립트 문자열 변수
- 목록 창 만들기
- 정글sw
- HTML
- sw정글사관학교
- PINTOS
- 회원가입 폼
- 회원가입
- SW정글
- JavaScrpit
- 백준
- conding test
Archives
- Today
- Total
코드치고 무게치고
[React] props로 하위 컴포넌트에서 상위 컴포넌트 값 변경하기 본문
현재 프로젝트를 하나 진행하면서 하위 컴포넌트에서 상위 컴포넌트로 값을 변경할 일이 생겼네요..
코드를 고치기에는 너무 많이 작업을 하여 그대로 진행하기로 했습니다.
하위 컴포넌트에서 상위 컴포넌트로 값 전달하기 알아볼게요
상위 컴포넌트는 Parents로 하고
하위 컴포넌트는 Children으로 만들게여
Parents.js
import React, { Component } from "react";
import Children from "./Children";
export default class Parents extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
parentsCount = () => {
this.setState({
count: this.state.count + 1,
});
};
render() {
return (
<div>
<Children parentsCount={this.parentsCount} /> //핵심**
<p>{this.state.count}</p>
</div>
);
}
}
Children.js
import React, { Component } from "react";
export default class Children extends Component {
render() {
return (
<div>
<button onClick={this.props.parentsCount}>1add</button>//핵심**
</div>
);
}
}
하위 Children에서 버튼을 눌러 상위 Parents 안의 count 값을 1+하는 기능입니다.
핵심 내용은
상위(Parents)에서 값을 바꾸는 함수를 만들고 하위(Children)한테 props로 함수를 전달해야 합니다.
함수를 Children에서 사용하면 상위 컴포넌트의 state 값을 변경할 수 있습니다.
'개발공부 > React' 카테고리의 다른 글
[React Hooks] input onChange 사용법 (onChange)사용 예시 (0) | 2022.01.26 |
---|---|
[React] express에서 query문을 사용하여 DB(mysql)에 데이터 가져오기 (2) | 2020.09.12 |
[React] express에서 query문을 사용하여 DB(mysql)에 데이터 저장하기 1 (0) | 2020.09.11 |
React 와 Express 연동하기 2 (Express에서 React 데이터 보내기) res (1) | 2020.09.04 |
React 와 Express 연동하기 1 (React에서 Express로 데이터 보내기) (0) | 2020.09.01 |
Comments