[React]props 사용하는 방법

[React]props 사용하는 방법

props란?

Props는 properties의 줄임말로 컴포넌트의 속성을 설정할 때 사용하는 요소입니다. 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다. 대표적으로 자식 컴포넌트가 부모 컴포넌트의 state를 공유하기 위해서 사용할 수 있습니다.

props 사용법

props 사용 예제

1.제목 클릭한 값을 저장하기 위한 함수를 만들어준다.

let [클릭한제목, 클릭한제목변경] = useState(0);

2.제목 클릭 이벤트를 넣어준다.

{
        글제목.map(function(글,i){
          return(
            <div className="list">
              <h4  onClick={ ()=>{클릭한제목변경(i)}}>{ 글 } <span onClick={()=>{ 따봉변경(따봉 +1)}}>👍</span> {따봉}</h4>
              <p>12월 17일 발행</p>
              <hr/>
            </div>
          )
        })
      }

0번째 클릭시 0번 제목, 1번째 클릭시 1번 제목을 출력. i를 새로 만들어서 차례대로 값을 부여한다.

3.자식컴포넌트에 state를 전송한다.

// 1) <자식컴포넌트 작명={state명}/>
{
        modal === true
        ? <Modal 글제목={글제목} 클릭한제목={클릭한제목}></Modal>
        : null
}

// 2)자식컴포턴트에서 props 파라미터 입력 후 사용
function Modal(props){//부모에게 전달받은 props는 여기에 다 들어있음
  return(
    <div className="modal">
      <h2>{ props.글제목[props.누른제목]}</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

전체코드

App.js

/* eslint-disabl */

import React, {useState} from 'react';
import './App.css';

function App() {

  let [글제목, 글제목변경] = useState(['남자 코트 추천','강남 우동 맛집','파이썬 독학']);
  let [따봉, 따봉변경] = useState(0);
  let [modal, modal변경] = useState(false);
  let [클릭한제목, 클릭한제목변경] = useState(0);

  function 제목바꾸기(){
    var newArray = [...글제목];
    newArray[0] = '여자 코트 변경';
    newArray[1] = '연희동 맛집 추천'
    글제목변경(newArray);
  }

  return ( 
    <div className="App">
      <div className="black-nav">
         <div>개발 Blog</div>
      </div>
      <button onClick={제목바꾸기}>버튼</button>
      
      {
        글제목.map(function(글,i){
          return  ( 
            <div className="list">
              <h3 onClick={()=>{modal변경(!modal); 클릭한제목변경(i)}}> { 글 } <span onClick={ ()=>{ 따봉변경(따봉+1)} }>👍</span>{따봉}</h3>
              <p>12월 17일 발행</p>
              <hr/>
            </div>
        ) 
        })
      }

      {
        modal === true
        ? <Modal 글제목={글제목} 클릭한제목={클릭한제목}></Modal> // 1.<자식컴포넌트 작명={state명}/>
        : null
      }
    </div>
  );
}

function Modal(props){
  return(
      <div className="modal">
      <h2>{ props.글제목[props.클릭한제목] // 2.자식컴포넌트에서 props 파라미터 추가 후에 사용
                }</h2> 
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

export default App;

App.css

.App {
  text-align: center;
}

body {
  font-family: "nanumsquare";
}

.modal {
  margin-top: 20px;
  padding: 20px;
  background: #eee;
}

.black-nav {
  background-color: black;
  width: 100%;
  display: flex;
  color: white;
  padding: 20px;
  font-weight: 600;
  font-size: 20px;
}

.list {
  margin-top: 30px;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

결과 화면