09. props 기본개념

서론

모달창 안에 있는 제목을 글 제목으로 변경하려면 어떻게 해야할까?

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

 

간단하게 모달창 코드에 {title}이라고 입력해주면 될 것 같지만 실제로 그렇게 코드를 짜면 위처럼 에러가 뜬다. 현재 title 변수는 App() 함수 안에 입력되어 있는 지역변수이기 때문에 App()함수 밖에 작성되어 있는 Modal() 함수에서 사용할 수 없다. 그러면 이럴땐 어떻게 해야할까? 바로 props를 사용하면 된다.

 

 

props 사용하기

 

컴포넌트가 2개가 부모/자식 관계인 경우에는 props를 활용해서 변수, 함수 등 다양한 값들을 전송할 수 있다. 현재의 코드에서는 App이 부모컴포넌트, Modal이 자식컴포넌트이므로 App 컴포넌트에서 사용중이 데이터를 Modal 데이터로 전송할 수 있다.

 

사용방법은 간단하다.

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

{/* 모달 상세페이지 컴포넌트 생성(조건문 사용) */}
{
  modal === 'open' ? <Modal title={title}/> : null
}

 

이름은 마음대로 작명해줘도 되지만 보통 전송해줄 {} 안의 이름과 같게 적는 경우가 많다고 한다. 그리고 제목이라는 데이터를 넘겨주는 것이므로 이름은 똑같이 title로 지정해줬다.

 

2. 자식컴포넌트를 만드는 함수로 가서 props를 파라미터에 등록 후 props.이름 사용

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

 

Modal 컴포넌트의 파라미터에 props를 받고 사용하고자 하는 곳에 props.이름을 작성해준다. props 명칭 역시 다른 명칭을 사용해도 상관없지만 props라고 작명하는 경우가 제일 많다고 한다. 이름은 위에서 작명해준 이름을 작성해주면 된다. 이렇게 하면 부모컴포넌트에 있는 데이터를 자식컴포넌트에서 사용할 수 있다. 

 

** 참고로 props는 state만 전송할 수 있는게 아니라 string, 일반 변수, 함수 등 다 가능하다. 또한 여러개를 무한히 전송할 수 있다.

{/* 모달 상세페이지 컴포넌트 생성(조건문 사용) */}
{
  modal === 'open' ? <Modal title={title} color="orange" function={functionName}/> : null
}

{/* ... */}

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

 

이런게 다 가능하다는 소리다. style에 props.color라고 열어두고 부모 컴포넌트에서 원하는 값들을 바꿔가며 전송할 수 있다. 단순한 문자값을 전송할때는 중괄호를 사용하지 않고도 값을 넘길 수 있다.

 

 

props 사용불가 경우

 

props는 부모 -> 자식 방향으로만 전송이 가능하다.

자식 -> 부모 / 자식 -> 자식은 불가능하다.

 

 

정리

props의 큰 동작원리는 자바 메소드와 비슷한 것 같다. 전역변수를 선언하지 않고 지역변수만을 사용할 때 메소드의 파라미터로 값을 넘겨서 해당 메소드에서 데이터를 사용하는 원리와 유사하되 좀 더 허용범위가 많다는 차이만 존재하는 것 같아서 이해하는데 크게 어렵지 않았다.

 

** 실습

모달창에 똑같이 제목수정 버튼을 하나 만들고 버튼을 누르면 '남자코트 추천'에서 '여자코트 추천'으로 바뀌는 기능을 만들어보겠다.

props는 변수, 문자뿐만 아니라 함수도 전송할 수 있는데 state 변경함수를 받아서 기능을 구현해보았다.

{/* 모달 상세페이지 컴포넌트 생성(조건문 사용) */}
{
  modal === 'open' ? <Modal title={title} color="skyblue" changeTitle={changeTitle}/> : null
}

function Modal(props) {
  return (
    <div className='modal' style={{background: props.color}}>
      <h4>{props.title[0]}</h4>
      <p>내용</p>
      <p>상세내용</p>
      <button onClick={() => {
        let copy = [...props.title];
        copy[0] = '여자코트 추천';
        props.changeTitle(copy);
      }}>제목 수정</button>
    </div>
  )
}

 

위에서 구현했던 것과 똑같이 onClick 이벤트 처리기를 이용해 실행코드를 입력해주고 제목을 변경한 copy 배열을 props로 받아온 state 변경함수 (changeTitle)을 이용해서 담아주었다. 이렇게 실행하면 state 값이 변경되어 제목이 '여자코트 추천'으로 변경된다.

 

해당 실습을 진행하면서 onClick시 발생하는 실행코드가 중복이라서 이 부분을 부모컴포넌트에서 함수명을 이용해 생성을 하고 그 함수만 받아와서 자식컴포넌트에서는 굳이 중복되는 코드를 입력하지 않고 싶은데, 해당 부분은 좀 더 고민을 해봐야 할 것 같다.