[React] - props

kang gicheon·2023년 7월 11일

React

목록 보기

3/10

실습을 위한 예제코드

function App (){
  let [title, setTitle] = useState(['게시물1', '게시물2', '게시물3']);
  return (
    <div>
      <Modal></Modal>
    </div>
  )
}

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

function **Modal** 내부에 title state를 넣을땐 이런식으로 작성하지만 실행이 되지 않습니다.

Modal function 내부에 title state 변수가 선언되지 않아 title이 not define, 즉 선언되지 않았다는 에러가 출력됩니다.

자바스크립에서는 다른 함수에 있는 변수를 마음대로 가져다 쓸 수 없습니다

그러나 컴포넌트 2개가 부모 / 자식 관계인 경우에 가능합니다
(다른 컴포넌트 안에 있는 컴포넌트를 자식 컴포넌트라고 부릅니다)

부모 컴포넌트의 state를 자식 컴포넌트로 전송할 수 있으며 자식도 전송받은 state를 사용할 수 있습니다.
전송시에는 props라는 문법을 사용합니다.

Props를 이용한 부모에서 자식으로 state 전송

사용하기 위한 2개의 단계가 있습니다

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

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

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

자식컴포넌트 만드는 곳에 가서 props라는 파라미터 등록 후 props.작명을 사용해서 작성했습니다

Props 참고사항

props는 등등 무한한 전송이 가능합니다(단 코드 복잡해짐 주의)

꼭 state만 전송할 수 있는 것은 아닙니다.

함수 파라미터 문법을 응용하기

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