props

• Modal이라는 컴포넌트 안에 위에서 선언한 state 값 글제목을 가져오려고 하면 글제목이라는 변수가 선언되지 않았다고 에러가 뜬다.
• function App()에 있지 function Modal()에 없기 때문에 그렇다.
  • 다른 함수에 있는 변수를 마음대로 가져다쓸 수 없다.

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

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

• 컴포넌트 2개가 부모 / 자식 관계인 경우에 가능(다른 컴포넌트 안에 있는 컴포넌트를 자식 컴포넌트라고 부른다.)

• 부모 컴포넌트의 state를 자식 컴포넌트로 전송해줄 수 있다. 그럼 자식도 사용 가능하다
• 전송시엔 props라는 문법을 사용

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

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

• 자식 컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state 이름} />
• 자식 컴포넌트 만드는 곳에 가서 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>
  )
}

• props는 <Modal 이런거={이런거} 저런거={저런거}> 이렇게 많이 전송이 가능
• 꼭 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() {} 이렇게 컴포넌트를 또 만들어서 각각 배경색을 다르게 만들어도 되지만 내용이 같아서 배경색만 다르면 굳이 같은 함수 여러개 만들 필요가 없다.
• props.color 이런식으로 구멍을 뚫어놓으면 이제 컴포넌트 사용할 때
  • <Modal color={'skyblue'} /> 이러면 하늘색 모달창
  • <Modal color={'orange'} /> 이러면 오렌지색 모달창 생성

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