props : 자식이 부모의 state 가져다쓰고 싶을 때

<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개가 부모/자식 관계인 경우에 가능합니다.

(한 컴포넌트가 다른 컴포넌트 안에 있는 경우)

부모 컴포넌트의 state를 자식 컴포넌트로 전달해줄 수 있읍니다

그럼 자식도 그 state를 받아 쓸 수 있겠죠?

전송시엔 props라는 문법을 사용합니다

 

 

 

 

props로 부모 state를 자식에게 전달해주는 법

2단계

1. 자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state 이름}/>

2. 자식컴포넌트 만드는 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> //['남자코트 추천', '강남 우동맛집', '파이썬독학'] 중 0번째
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

아래코드처럼 이런식으로 작명을 아예 state이름과 동일하게 지어버려도 괜찮다

그래야 구분하기 쉬우니까요

function App (){
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
    <div>
      <Modal 글제목={글제목}></Modal>
    </div>
  )
}

function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.글제목[0] }</h4> //['남자코트 추천', '강남 우동맛집', '파이썬독학'] 중 0번째
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

 

 

 

+

(참고1) props는 <Modal 이런거={이런거}  저런거={저런거}> 이렇게 10개 100개 1000개 무한히 전송이 가능합니다.

(참고2) 꼭 state만 전송할 수 있는건 아닙니다. 

<Modal 글제목={변수명}> 일반 변수, 함수 전송도 가능하고 

<Modal 글제목="강남우동맛집"> 일반 문자전송은 중괄호 없이 이렇게 해도 됩니다.

 

 

 

 

 

응용편 ) props == 함수파라미터

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

이 코드에서는 모달창의 색깔이 파란색입니다

그런데 여기서 오렌지색, 노란색 등으로 바꿔주고 싶으면 어떡할까요? 일일이 하드코딩할까요?

 

function Modal2() {}

function Modal3() {}

....

이렇게 색깔이 다른 모달창을 여러개 만들어도 되겠지만,

내용이 같은데 굳이 여러개를 만들필요가 업음

 

그냥 부모컴포넌트가 주는 속성을 받아서 대입만 하는 형식으로 만들어봅시다

function Modal(props){ //파라미터처럼 써주고, props는 참고로 객체임
  return (
    <div className="modal" style={{ background : props.color }}> //props의 color값을 데려와~
      <h4>{ props.글제목[0] }</h4> //props의 state 데려온것
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

그럼 부모 컴포넌트에 따라 props.color가 달라지겠죠?

<Modal color={'skyblue'} /> 이러면 하늘색 모달창이 생성됩니다.

<Modal color={'orange'} /> 이러면 오렌지색 모달창이 생성됩니다.

 

 

 

 

마지막으로

모달창안에 글수정버튼 만들고

그거 누르면 첫 글제목이 '여자코트 추천'으로 바뀌는 기능을 만들어봅시다.

function Modal(props){    //자식컴포넌트에 props를 파라미터로 넣어주고
 return (
    <div className ='modal' >
        <h4>{props.글제목[0]}</h4>
        <p>날짜</p>
        <p>상세내용</p>
        <button onClick={()=>
          {props.글제목변경(['여자코트추천','강남우동맛집','파이썬독학'])}>글수정</button>
    </div>
 )
}

props로 부모 컴포넌트의 state와 state 변경함수를 데려와주었다~!

그리고 반드시 

{
      modal == true ? <Modal 글제목변경={글제목변경} 글제목={글제목}/> : null
    }

이것처럼 부모컴포넌트에서 자식컴포넌트 사용하는 곳에 가서

<자식컴포넌트 작명={state이름 or state변경함수이름}/> 적어줘야 합니다!

2단계 기억하기

1. 자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state 이름}/>

2. 자식컴포넌트 만드는 function으로 가서 props라는 파리미터 등록후, props.작명 사용!