[Blog-project] props

🚀 'props' 란?

• 부모 컴포넌트의 state를 자식 컴포넌트에 전달할 때, 부모에게 받아온 데이터.
• Data Flow는 단방향 형식으로 부모에서부터 자식으로 이동하기 때문에 거꾸로 올라갈 수 없다. 따라서 props에 있는 데이터들은 수정이 불가능하며 오직 안에있는 값을 꺼내서 사용할수만 있다.
• 자식 컴포넌트의 매개변수에 props라고 쓰고, 받아와야하는 데이터는 {props.state이름}으로 사용한다.

🍎 props 사용방법
1) <자식컴포넌트 전송할이름={state명}> 이렇게 사용한 후
2) 자식컴포넌트 선언하는 function 안에 파라미터(props)를 하나 만들어주기.
3) 자식컴포넌트 함수 내에서 state값을 받와아야 하는 데이터 안에 {props.state이름}으로 사용한다.

🐣 props 전달 예제(1)

// Main Component(App.js) = 부모 컴포넌트
import Modal from './Component/Modal.js';  // import해서 불러오기

function App (){
  let [title, setTitle] = useState(['스릴러 영화 추천', '강남 우동맛집', '리액트독학']);
  return (
    <div>
      ...
      //  <Modal 전송할이름={state명}> 
      <Modal title={title}></Modal>  // state값을 전달 (변수명={state이름})
    </div>
  )
}



// Modal Component(Modal.js) = 자식컴포넌트
function Modal(props){
  return (
    <div className="modal">
                // props.전송할이름
      <h2>제목 { props.title[0] }</h2>  // 스릴러 영화 추천
      <p>날짜</p>
      <p>상세내용</p>
    </div>
      <div className="modal">
                // props.전송할이름
      <h2>제목 { props.title[1] }</h2>  // 강남 우동맛집
      <p>날짜</p>
      <p>상세내용</p>
    </div>
                // props.전송할이름
      <h2>제목 { props.title[2] }</h2>  // 리액트 독학
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

🍎 props 특징

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

2) props라는 파라미터엔 전송한 모든 props 데이터가 들어가있다. props.title 이런 식으로 원하는 것만 꺼내쓰면 된다.

3) props 전송할 땐 꼭 {} 중괄호로 전송해야하는건 아니다.

<Modal 글제목={변수명}> 이렇게 변수명을 넣고싶으면 중괄호를 쓰고,
<Modal 글제목=”강남우동맛집”> 이렇게 일반 텍스트를 전송하고 싶으면 따옴표 써도 된다.

🐣 props 전달 예제(2)

// Main Component(App.js) = 부모 컴포넌트
import Modal from './Component/Modal.js';  // import해서 불러오기

function App (){
  let [title, setTitle] = useState(['스릴러 영화 추천', '강남 우동맛집', '리액트독학']);
  let [누른제목, 누른제목변경] = useState(0);

  return (
    <div>
      // 이 버튼을 누르면 누른제목 state가 0이 됨
      <button onClick={()=>{ 누른제목변경(0) }}>버튼1</button>
      // 이 버튼을 누르면 누른제목 state가 1이 됨    
      <button onClick={()=>{ 누른제목변경(1) }}>버튼2</button>
      // 이 버튼을 누르면 누른제목 state가 2가 됨
      <button onClick={()=>{ 누른제목변경(2) }}>버튼3</button>

      <Modal title={title} 누른제목={누른제목}></Modal>  // state값을 전달 (변수명={state이름})
    </div>
  )
}



// Modal Component(Modal.js) = 자식컴포넌트
function Modal(props){
  return (
    <div className="modal">
                            // [props.누른제목] 안에는 0, 1, 2가 들어옴(변하는 index용도)
      <h2>제목 { props.title[props.누른제목] }</h2>  // 스릴러 영화 추천
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}