리액트 프롭스 관련

Question

컴포넌트간 프롭스 전달 관련해서 질문드립니다.제가 구현하려는 기능은 부모컴포넌트에서 초기화버튼 클릭 시손자 컴포넌트의 텍스트 박스들의 값이 다 빈 값이 되고손자 컴포넌트의 텍스트 박스에 값을 입력하면 부모 컴포넌트의 state값에 데이터가 들어가는서로 연동되는 기능을 구현하고 싶은데 잘 안됩니다. 아래는 시도했던 코드 예시입니다.A.jsx (부모)import React, {Component} from 'react' import B from ' ./path' export default class A extends Component{ state = { info : { title: '', name: '', } } handleClick = (e) => { this.setState({ info : {...this.state.info, title: '' }}) this.setState({ info : {...this.state.info, name: '' }}) //초기화 버튼 클릭 시 C컴포넌트의 값을 비우기 위한 핸들러 } handleChange = (e) => { this.setState({ info : {...this.state.info, title: e.value}) this.setState({ info : {...this.state.info, name: e.value}) //C컴포넌트에서 값 입력시 state에 값 넣기 위한 핸들러 } render() { return( <초기화버튼 onClick={(e) => handleClick(e)} /> // 이건 그냥 인풋 초기화 버튼 //이건 컴포넌트 ) } }B.jsx (자식)import React, {Component} from 'react' import C from './path' export default class B extends Component{ state = { info = this.props.info } render() { return( <필요한 것들 /> //실제로는 여기 들어가야할게 있어 중간에 자식 컴포넌트인 B.jsx 가 필요합니다. ) } } C. jsx (손자)import React, {Component} from 'react' export default class C extends Component{ state = { info = this.props.info } render() { return( // 제목입력하는 텍스트 박스 (입력 시 A컴포넌트 state에 값 들어감) <제목 텍스트 박스 value = {this.state.info.title} onChange={(e) => this.porps.handleChange(e)} /> <이름 텍스트 박스 value = {this.state.info.name} onChange={(e) => this.porps.handleChange(e)} /> ) } }C에서 입력하는 값들이 A의 state로 관리되려면 이렇게 onChange핸들러로 A컴포넌트의 state들 넘겨주면서 하는게 맞나요?제 생각은 이렇게되면 A에서 초기화버튼으로 state 빈값으로 만들어질 시 손자인 C는 빈 값을 전달받으니텍스트박스의 글씨들이 지워져야된다 생각되는데.. 그냥 입력한 값 그대로 남아있습니다..개발자도구로 확인해보면 C컴포넌트에서 텍스트 입력 시 A의 state로는 들어가는데초기화 버튼 클릭 핸들러로 state에 빈 값 넣어주는 부분이 적용되지 않고 있었습니다.어디가 문제인지 모르겠습니다. 뭔가 코드가 난잡하고 잘못된거 같기는한데 ... 독학으로 부딪히면서 하다보니 감이 안오네요 ㅜㅜ선생님들 도움 좀 주시면 감사하겠습니다.아예 같은 맥락의 새로운 코드로 보여주시거나 설명해주셔도 감사하겠습니다.

bany66 · Answer

저는 함수형으로 해보았습니당App.js(부모) function App() { // state const [info, setInfo] = useState({ title: "", name: "", }); const handleClick = (e) => { setInfo({ title: "", name: "", }); //초기화 버튼 클릭 시 C컴포넌트의 값을 비우기 위한 핸들러 }; const handleChange = (e) => { setInfo({ title: e.target.id === "1" ? e.target.value : info.title, // title input 값 , title input id === 1 name: e.target.id === "2" ? e.target.value : info.name, // name input 값 , name input id === 2 }); }; return ( <> ); } export default App; B.jsfunction B({ info, handleChange }) { return ( <>
다른 필요한 것들
); } export default B;C.jsfunction C({ info, handleChange }) { return ( <>

제목
handleChange(e)} />

이름
handleChange(e)} />
); } export default C;작성자님께서 원하시는대로 됩니다

songline · Answer

아래는 해당 코드를 작성하신 것을 최대한 보존하며 기능하도록 고친 것입니다. 어디를 어떻게, 왜 고쳤는지는 주석을 참고해주세요.class A extends React.Component{ // 본래 이런 초기화 작업은 생성자에서 처리하므로 추가 constructor(props) { super(props); this.state = { info : { title: '', name: '', } } // 내부에서 `this.setState`를 이용해야 하는데 다른 곳에서 사용하면 `this`가 불분명해지므로 명시적으로 바인딩 this.handleClick = this.handleClick.bind(this); this.handleChange = this.handleChange.bind(this); } handleClick = (e) => { this.setState({ info : {...this.state.info, title: '', name: '' }}) // 한 줄로 줄였습니다. } handleChange = (e) => { const { id, value } = e.target; // `target.id` 랑 `target.value`를 동명의 변수에 저장해주는 문법 if (id === "title") this.setState({ info : {...this.state.info, title: value}}); else if (id === "name") this.setState({ info : {...this.state.info, name: value}}); } render() { // `handleClick(e)` -> `this.handleClick(e)` return(<> ) } } class B extends React.Component{ // 내부에서 굳이 state를 가지고 있을 필요 없어 지움 render() { return(<>
대충 필요한 무언가들
) } } class C extends React.Component{ // 내부에서 굳이 state를 가지고 있을 필요 없어 지움 render() { // `this.state.info` -> `this.props.info` // `this.porps.handleChange` -> this.props.handleChange // 입력칸 붙어있는게 거슬려서 p 태그로 감쌌습니다. return(<>
title: this.props.handleChange(e)} />

name: this.props.handleChange(e)} />
) } }그 아래는 해당 코드를 동일한 기능을 가진 함수형으로 다시 짠 것입니다. 기능 및 로직상으로는 동일하며, 위 아래 코드를 컴포넌트 단위로 짜집기 해도 정상동작합니다. 개인적으로는 아래 방식을 보다 선호합니다.const A = () => { const [info, setInfo] = React.useState({ title: "", name: "" }); const handleClick = () => { setInfo({ title: "", name: "" }); } const handleChange = (e) => { const { id, value } = e.target; if (id === "title") setInfo({ ...info, title: value }); if (id === "name") setInfo({ ...info, name: value }); } return(<> ) } const B = (props) => { return(<>
대충 필요한 무언가들
) } // 아까 위에서 `A` 안에 `handleChange` 작성할 때 봤던 문법 응용 // `props` 에서 따로 참조하는 것이 아니라 미리 변수에 받아서 편하게 사용. const C = ({ info, handleChange }) => { return(<>
title:

name:
) }

리액트 프롭스 관련

2개의 답변

Q&A 목록