React_하위 컴포넌트로 props가 전달되는 과정

// 영단어 삭제하기 App.js

import './App.css'

import React, { Component } from "react";

import Words  from "./components/dummyData";  // import 뒤의 이름은 파일명과 달라도 된다.

import Word from "./Word";

class App extends Component{

  state={

    words : Words

  }

  handleRemove = ( id, e ) => {

    const word = e.target.previousSibling.innerText // previousSibling : 이전 형제 요소

    console.log(e.target, word)

    console.log(id)

    alert(`해당 단어를 삭제하시겠습니까 - ${word}?`)

    const words = this.state.words.filter((w, index) => index !=id) // 클릭한것을 제외한 배열을 화면에 보여줘야 하니까 클릭                                                                                                          한 단어를 제외해야한다

    this.setState({words}) // this.setState({words:words}) 일 경우 ,  this.setState({words})로 표기 가능하다

  }

 

render(){

    const { words } = this.state

 

    return(

      <div>

        <h1 style={{ textAlign: 'center' }}>영단어장</h1>  

       {/*인라인 스타일을 넣을때 중괄호 안에 카멜케이스로 넣을 수 있다*/}

       {/* state : words : Words (Words from "./components/dummyData") 이므로  words는 dummyData의 배열이다*/}

       {/* 배열이므로 map메서드를 돌려서 배열 안의 객체를 조회한다, id값은 key값 설정을 위해 인자로 설정해둔다 */}

       {/* Word 컴포넌트에 map에서 조회한 객체와 id값, handleRemove 함수를 전달해야한다.

         handleRemove= {this.handleRemove(id, e)} 로 작성시 render될 때 마다 무한루프가 발생하므로,

         handleRemove={(e)=> this.handleRemove(id,e)} 로 작성해주어야 한다.*/}

        {words.map((w, id)=> {

          return(

              <Word w={w}  handleRemove={(e) => this.handleRemove(id, e)}></Word>

          )

        })}

      </div>

    )

  }

}

export default App

 

// Word.js파일

 

import Button from "./components/Button"

function Word({handleRemove, w}){     // handleRemove, w는 App.js에서 props로 받은 값들이다.

    const wordStyle ={

        display : 'flex',

        alignItems : 'center',

        justifyContent : 'center'

      }

    return(

        <div style={wordStyle}>

            {/* w는 map메서드로 객체를 조회한 결과이며, App.js에서 props로 받은 값이다 */}

            <h2>{w.word}</h2>

            {/* handleClick은 자식컴포넌트인 Button Onclick에 보내기 위한 props이다 */}

            <Button size='small' type='button' handleClick={handleRemove} >DELETE</Button>  

        </div>

    )

   

}

export default Word

// Button.js

 

import React from "react";

import './Button.css'

// 함수가 하위 컴포넌트로 전달되는 과정 (App.js => Word.js => Button.js)

// App.js : handleRemove 

// Word.js : handleClick={handleRemove} 

// Button.js : onClick={handleClick}

 

function Button({ children, size, color, width, handleClick, disabled }){

   

    return <button className={`Button ${size} ${color} ${width} ${disabled ? 'blocked': ''}`} onClick={handleClick} disabled={disabled}>{children}</button>

}

export default Button

Button.defaultProps = {

    size: 'medium',

    color: 'tomato',

    width: '50px',

    disabled: false

}

정리

1. import 뒤의 이름은 자유롭게 설정이 가능하다 

ex) import 아무거나 from '파일경로'

2. 클릭한 내용을 삭제하고 싶을 때에는 filter(클릭한 내용이 아닌 경우)로 작성해야 한다.

클릭한 내용을 제외한 배열을 화면에 표시해야 하기 때문이다.

3. JSX 문법에서 인라인 스타일을 넣을 때 중괄호 안에 카멜케이스로 작성하여 넣는다.

ex) <h1 style={{ textAlign : 'center' }}>인라인스타일</h1> 

4. JSX 문법에서 배열을 조회할 땐 일반적으로 map메서드를 사용한다. 매개변수로 (객체, Index)값을 설정한다.

Index를 설정하는 이유는 배열의 경우 속성에 key값을 넣어줘야 하는데, 현재 DB ObjectId가 별도로 없으므로, Index값을 key 값으로 설정하기 위해서다.

5. 함수와 인자값을 하위 컴포넌트에 전달하기 위해서는 무한 루프가 발생하지 않도록, (e) => 함수(인자값) 로 작성해야 한다. 

6. App.js의 handleRemove를 Word.js에서 handleClick으로 실행하고  Button.js에서 Onclick으로 실행한다.

함수가 하위 컴포넌트로 전달되는 과정을 이해하자.

 

 

코드 출처 :

선생님 블로그 https://syleemomo.tistory.com/