React) 부모가 물려주는 props

부모가 자식에게 물려주는 props

function App(){  //부모 component 
  <Modal/>
}

function Modal(){  //자식 component
}

부모컴포넌트인 <App/>에서 쓰여진 state구문을 자식인 <Modal/> 쓰고싶다면? - >props로 받아오자

props 문법

1. 자식 컴포넌트를 사용하는 부분에서 작명={state명}

{
  modal == true ? <Modal 글제목={글제목} bgcolor="yellow"/> : null
}

2. 자식 컴포넌트를 생성하는 함수부분에서 function Child(props){}

function Modal(props){  //props 파라미터로받기
  return(
    <div className='modal' style={{backgroundColor:props.bgcolor}}>  //props로 일반 문자도 받아올수있고
    <h4>{props.글제목[0]}</h4>  //props로 state도 받아올 수 있다 
    <p>날짜</p>
    <p>상세내용</p>
  </div>
  )
}

---

props 문법으로 응용 문제 풀어보기

list의 제목을 누르면, 아래 모달창의 제목도 똑같이 변경되는 ui를 만들어보기

App component내에 modalTitle관련 state 만들기.

//Modal창 내의 제목 동적으로 구현하기 위한 현재 상황 state로 만들어두기
  let[modalTitle, setModalTitle] = useState(0);

{
        글제목.map(function(item, index){
          return(
            <div className="list">
            <h4 onClick={()=>{
              setModal(true); setModalTitle(index);
            }}>{item} 
              <span onClick={()=>{
                let copy = [...따봉];
                copy[index] = copy[index] + 1;
                따봉변경함수(copy);
              }}>👍</span> {따봉[index]}
            </h4>
            <p>5월 17일 발행</p>
            </div>
          )
        })
}

setModalTitle(index)
.map에 의해 반복되며 순번이 index 인자로 받게되니,
같이 순번적용할 수 있다.