props

---

코딩애플 리엑트 강의 듣고 혼자서 기록하는 것 입니다.

강의 내용 출처는

https://codingapple.com/course/react-basic/

모든 저작권은 코딩애플에게 있습니다.

---

자식이 부모의 state를 사용하고 싶을 때는 props

---

어떠한 함수에서 선언된 변수는 그 함수 바깥(외부)에서는 사용할 수 없다.

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

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

위와 같은 이유로 function Modal에서 { 글제목[0] } 이라고 해도 작동하지 않는다.

그러나 컴포넌트 두 개가 부모 / 자식 관계인 경우엔 가능한데

이게 무슨 소리냐면

이렇게 컴포넌트 구조가 되어있을 때이다.

부모 컴포넌트의 state를 자식 state에게 전송이 가능한데
전송시에는 props라는 문법을 사용한다.

props 문법 사용법

---

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

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

코드로 확인해보면

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를 부모(App) -> 자식(Modal)로 보내주며 function Modal에서도 글제목이라는 state를 사용 가능하다.

props는 여러개 가능하다
: <modal 이것={이것} 저것={저것} .... >이렇게 많이 전송 가능

꼭 state만 전송할 수 있는건 아니다
: <Modal 글제목={ 변수명 }> 일반 변수, 함수 전송도 가능하고

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

props 사용시 주의사항

---

▲ 역으로 자식 -> 부모는 불가능하다.

▲ 자식 -> 자식도 불가능하다

props는 함수 파라미터 문법과 똑같다.

---

함수에 파라미터 같은걸 넣는 이유는 하나의 함수에서 여러가지 기능을 사용하기 위해선데
props도 가능하다.

코드로 확인해보면

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>
  )
}

<Modal color={'skyblue'} /> 이러면 하늘색 모달창이 생성되고
<Modal color={'orange'} /> 이러면 오렌지색 모달창이 생성된다.

props의 파라미터인 color 부분이 바뀌면서 색만 바뀌는것이다.
그래서 비슷한 컴포넌트를 또 만들 필요가 없다.