React 입문 : Props

Props는

컴포넌트끼리 교환 하고 정보들을 주고 받을 때 사용하는 매개체

1. props는 반드시 위에서 아래로만 전달 가능하다.
   부모-> 자식 방향
2. props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.

props 왜 쓸까?

2023년의 리액트에서는 함수형 컴포넌트로 웹페이지를 보여주는데, 함수 안에 선언된 변수들은 함수 바깥에서 참조 할 수 없다. 그렇기에 함수 안에 선언된 변수들은 그 안에 있는 함수들이 참조 할 수 있는데, 그것을 REACT에서는 props로 전달 한다고 한다.

Sample

function App(){
  const name = '모달창입니다.'
  return <Modal/>
}

function Modal ( ) {
  return app에있는 name을 보여주고 싶다.
}
  //-----------------
  
function App ( ) {
  const name = '모달창입니다.'
 return <Modal name= {name}/> 
}
 
 function Modal (props) {
   const theNameInApp = props.name;
   return {theNameInApp} // '모달창입니다.'
 }

위 코드를 설명하자면,

자식에게 내려주고 싶은 변수, 함수들을 컴포넌트 태그에

이름작명 = { props해줄 변수, 함수명 }

이렇게 하면 된다.

props가 어떠한 형태로 전달 될까??

props가 어떠한 형태로 전달 되는 건지 궁금하지 않은가??

난 궁금해 했다.

console로 찍어보면

  
function App ( ) {
  const name = '이름'
 return <Modal name= {name}/> 
}
 
 function Modal (props) {
   console.log(props) // Object 
  ...
 }
  
// Props
{
  name : '이름'
}

Object로 전달된다

반드시 인자값의 이름을 props 라고 해줄 필요도 없고, 전달 해줄 이름을 변수 선언 한 이름과 동일시 할 필요는 없다.

function App ( ) {
  const name = '이름'
 return <Modal 너의이름은= {name}/> 
}
 
 function Modal (프롭스) {
   console.log(프롭스) // Object 
  ...
 }
  
// Props
{
  너의이름은 : '이름'
}