React - props

자식컴포넌트에서 부모컴포넌트에 있던 state를 쓰고 싶으면 그냥 사용하면 안되고

props로 전송해서 써야합니다. 

 

다음과 같은 코드를 봅시다.

아래의 코드에서 처럼 실행하면 실행되지 않습니다. 왜냐하면 글제목이라는 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라는 문법을 사용합니다.

 

 

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

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

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

 

이전에 작성했던 글제목1이라는 state를 자식컴포넌트로 전송해보겠습니다. 

...
{
      modal===true ? <Modal 글제목1={글제목1}></Modal> : null
}

...

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

props는 <Modal a={a} b={b}> 이렇게 10개 ... 100개 무한히 전송가능합니다. 

그리고 꼭 state만 전송할 수 있는건 아닙니다. 

<Modal 글제목={변수명}> 일반 변수, 함수 전송도 가능하고

<Modal 글제목="강남우동맛집"> 일반 문자전송은 중괄호 없이 이렇게 해도 가능합니다. 

 

하지만 자식 -> 부모 전송은 불가능합니다.

옆에 있는 컴포넌트 전송도 불가능합니다.

 

props

props는 함수 파라미터 문법이랑 똑같습니다. 

함수에 파라미터같은걸 넣는 이유를 생각해보면 "함수 하나로 다양한 기능을 사용하기 위해서 쓰는게 파라미터 문법" 입니다. props도 실은 파라미터랑 똑같은 문법입니다. 

 

아래와같이 하늘색 배경의 모달창이 필요하면 저렇게 스타일을 넣으면 됩니다. 

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

여기서 만약 오랜지색 모달창, 노란색 모달창이 필요하면 

두개의 모달창을 만들면됩니다. 하지만 너무 굳이입니다.

 

따라서 props.color 이런식으로 구멍을 뚫어놓으면 됩니다. 

{
      modal===true ? <Modal color={'green'} 글제목1={글제목1}></Modal> : null
}

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

그래서 함수 파라미터 문법을 잘 알고 있다면 응용도 가능합니다.