props 문법

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

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

Modal 함수 내부에 '글제목'이라는 state를 넣고 싶어서 넣었더니 오류가 발생했다.
왜⚠️
'글제목'이라는 state는 App함수 내부에 선언되었기 때문.
JS강의에서 배웠듯이 다른 함수 내부에서 선언된 변수는 또 다른 함수에서 쓸 수 없다.

하지만! props문법을 사용하면 가능하다.
단 조건이 있다.
- 컴포넌트가 부모/자식 관계인 경우에만 가능하다.

<부모 state를 자식 컴포넌트에게 전송하는 법>

1. <자식컴포넌트 작명={state이름}/>

{modal == true ? <Modal 작명={글제목}/> : null}

(작명은 state명과 똑같이 하는게 일반적이다)

2. props 파라미터를 추가하고 {props.작명}을 사용한다.

function Modal(props) { // props 파라미터 추가
    return (
      <div className="modal">
        <h4>{props.작명}</h4> // {props.작명}
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    );
  }

<props 응용>

Q. 다양한 색의 모달창이 필요한데 구현해주세요.

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

위와 같이 modal이라는 클래스를 가진 div에 직접 스타일링을 해줘도 되겠지만, 배경색이 skyblue가 아닌 orange색이 필요하다면 똑같은 html 코드를 짜줘야하는 불상사가 발생할 것이다.

props를 활용하면 비슷한 코드를 여러번 작성하지 않아도 된다.

{modal == true ? <Modal color={'skyblue'} 작명={글제목}/> : null}
// Modal 컴포넌트에 색을 스타일링해주는 코드를 입력.
function Modal(props){
  return (
    <div className="modal" style={{ background : props.color }}> // style에는 props문법을 사용해서 확장성을 높여준다. 
      <h4>{ props.글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

이렇게 코드를 짜면 색을 바꾸고 싶을 때마다 color={'skyblue'} 이 부분만 수정해주면 된다.

🔖참고

props로 일반 문자&숫자도 전송할 수 있다.

{modal == true ? <Modal color="red" 작명={글제목}/> : null}
// red라는 문자가 color라는 이름으로 전달된다. 

= props로 state만 전송할 수 있는게 아니라 문자, 숫자, 함수도 전송 가능하다.

출처. 코딩애플