[React] 리액트 공부 일기(props란?)

전에 하던거에 이어서!

제목 누르면 아래에 노란색 모달 박스 on, off 다시 만들어주고

이번에 하려는건 모달박스의 제목 위치에 우리의 포스팅 제목(의정부 맛집 추천, 서울 데이트 코스, PC게임 추천)을 넣어주려고 한다.

function App() {

  let [title, setTitle] = useState(
    ['의정부 맛집 추천', '서울 데이트 코스', 'PC 게임 추천']
  );
  let [like, likeCount] = useState([0, 0, 0]);
  let [modal, setModal] = useState(false);

  return (
    <div className="App">

      <div className='nav'>
        <h3>MILOG</h3>
      </div>

      { // i = 반복문 돌 때 마다 1씩 증가하는 정수
        title.map(function(e, i) { 
          return (
            <div className='list'>
              <h4 onClick={ ()=> {
                if(modal == true) {
                  modal = false;
                } else {
                  modal = true;
                }
                setModal(modal);
              } }>
                { e } <span onClick={ ()=> {
                  let copy = [...like];
                  copy[i] = copy[i] + 1;
                  likeCount(copy);
                }}>💖</span> { like[i] }
              </h4>
              <p>2022-09-15 발행</p>
            </div>
          )
        })
      }

      {
        modal == true ? <Modal /> : null
      }

    </div>
  );
}

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

처음엔 이렇게 시도를 했으나 당연하게 에러가 발생했다.

이유는 title은 App() 함수 안에서 생성 되었으니 App()함수 밖에 있는 Modal()에선 가져올 수 없다.

 

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

먼저, 현재 프로젝트 구조를 파악해보면 <App> 컴포넌트 안에 <Modal>이 컴포넌트 형태로 들어가 있는 구조이다.

<App>이 부모 컴포넌트 <Modal>이 자식컴포넌트다.

부모 컴포넌트가 가지고 있던  state를 자식 컴포넌트가 받아서 사용할 수 있는데 이때 props를 사용한다.

 

그럼 이제 부모 컴포넌트<App>이 가지고 있던 title state를 자식 컴포넌트 <Modal>에 받아서 사용해보자.

 

부모 → 자식 state 전송하는 방법

1. <자식컴포넌트 작명={state이름}>

  modal == true ? <Modal title = {title} /> : null

     

 

2. props 파라미터 등록 후  props.작명 사용

function Modal(props) {

  return (

    <div className='modal'>

        <h4>{props.title}</h4>

        <p>날짜</p>

        <p>상세내용</p>

      </div>

  );

}

 

 

마음껏 작명해도 되지만 title = {title} 형태로 같은 이름으로 써도 된다.

 

이렇게 해서 실행해보면

 

이런식으로 몽땅 출력되어버린다.  title이라는 state는 배열이니까.

 

 

그리고 또 한가지 중요한 포인트는 props는 부모 컴포넌트에서 자식컴포넌트로 전송은 가능하지만 자식 컴포넌트에서 부모 컴포넌트로의 전송은 불가능하다.

위의 코드에서는 없지만 이웃 컴포넌트로의 전송 또한 불가능하다.

props로는 다양한 응용이 가능하기 때문에 잘 공부해두면 너무너무 좋을것 같다.

 

컴포넌트가 많아지면 props 쓰는게 귀찮아지기 때문에 컴포넌트를 마구마구 생성하는건 자제하도록 하자❗❗