React props

props

자식 컴포넌트가 부모 컴포넌트에 있던  state를 쓰고 싶으면

props로 전송해서 써야한다. 

 

왜냐하면 컴포넌트 는 함수  이고

자바스크립트에선 다른 함수에 있는 변수(state)를 마음대로 가져다 쓸수 없기 때문이다. 

function App (){
  let [title, setTitle] = useState(['저녁 장보기', '병원 예약', '파이썬독학']);
  return (
    <div>
      <Modal></Modal>
    </div>
  )
}

//다른 컴포넌트에서 선언된 state를 사용 했기때문에 에러가 날것임.
function Modal(){
  return (
    <div className="modal">
      <h4>{ title[0] }</h4>  
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

그런데 컴포넌트 가 부모/자식 관계인 경우엔  state를 자식컴포넌트로 전송 가능하다. 

다른 컴포넌트 안에 있는 컴포넌트를 자식 컴포넌트 라고 한다. 

이때 사용하는 것이 props라는 문법이다.

 

props 사용법

1. 부모컴터넌트 안에  있는  자식컴포넌트에 <자식컴포넌트 작명={state이름}/>

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

 

function App (){
  let [title, setTitle] = useState(['저녁 장보기', '병원 예약', '파이썬독학']);
  return (
    <div>
      <Modal title={title}></Modal>
    </div>
  )
}
//자식 컴포넌트 태그에 <자식컴포넌트 작명={state이름} /> 

//파라미터에 props 입력 
function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.title[0] }</h4>  
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}
//state앞에 props. 붙여서 사용

 

props 사용시 참고사항

1. props는 <Modal 이런거={이런거}  저런거={저런거}> 이렇게 10개 100개 1000개 무한히 전송이 가능

2.state 뿐만 아니라 일반 변수, 함수 전송도 가능 

3. 문자 전송시에는 <Modal title="text">  사용 가능 

4. 부모 -> 자식 간 전송 가능 하지만 자식-> 부모 or 자식-> 다른자식 은 불가능