React - 부모의 state를 가져다 쓰고싶을 때 쓰는 props

자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고싶으면 props 로 전송해서 쓰면 된다

<Modal>안에 글제목 state가 필요하다

function App (){
  let [글제목,글제목변경] = useState(['여자 코트 추천', '남자 코트 추천', '아동 코트 추천']);
  return (
    <div>
      <Modal></Modal>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h4>{ 글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

-> 작동안됨
'글제목' 이라는 변수가 define 되지 않는다는 에러가 뜬다
글제목이라는 state 변수는 function App() 에 있지 function Modal() 에는 없기 때문!!

이렇게 컴포넌트가 2개 부모/자식 관계인 경우는 가능하다

props 로 부모->자식 state 전송하기

step1. 자식 컴포넌트를 사용하는 곳에 가서 <자식컴포넌트 작명={state이름}/>
step2. 자식 컴포넌트를 만드는 function으로 가서 props라는 파라미터를 등록 후 "props.작명"으로 사용

우선 글제목이라는 부모 컴포넌트의 state를 자식 컴포넌트 <Modal>에 전송하기

function App (){
  let [글제목,글제목변경] = useState(['여자 코트 추천', '남자 코트 추천', '아동 코트 추천']);
  return (
    <div>
      <Modal 글제목={글제목}></Modal>
    </div>
  )
}

function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

(참고) 꼭 state만 전송하는 것이 아닌 일반변수, 함수, 일반 문자전송고 가능하다

자식 -> 부모 전송 불가능

다른 컴포넌트 전송 불가능

props = 함수파라미터문법

함수에 파라미터 넣는 이유⭐⭐⭐
함수 하나로 다양한 기능을 사용하기 위해서

props도 파라미터와 똑같은 문법이기 때문에 응용이 가능하다

ex) 모달창 배경 색 바꾸기

function Modal(props){
  return (
    <div className="modal" style={{ background : 'skyblue' }}>
      <h4>{ props.글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

여기서 갑자기 오렌지색 모달창이 필요하거나 노란색 모달창이 필요하다면

function Modal(props){
  return (
    <div className="modal" style={{ background : props.color }}>
      <h4>{ props.글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

background에 props.color 이런식으로 구멍을 뚫어놓고 컴포넌트를 사용할 때

<Modal color={'skyblue'} /> // 하늘색 모달창
<Modal color={'orange'} /> // 오렌지색 모달창

이렇게 하면 비슷한 컴포넌트를 또 만들 필요가 없다

---

오늘의 숙제

: 모달창 안에 글수정 버튼을 만든 후 클릭하면 '중년 코트 추천' 으로 바뀌는 기능 만들기

<button onClick={()=>{
  props.글제목변경(['여자 코트 추천', '남자 코트 추천', '중년 코트 추천'])
}}>글수정</button>