React - props - 1

React props

React props 란 properties의 약자로 상위(부모) 컴포넌트가 하위(자식) 컴포넌트에게 값을 전달할때 사용하는 속성이다.

props는 상위 컴포넌트가 props를 사용하여 값을 수정할 수 있지만 자식 컴포넌트에서는 값을 읽기만 가능하기때문에 props는 단방향 데이터 흐름을 갖는다.

 

prop의 선언방법은 이러하다.

// 상위(부모) 컴포넌트 
<자식컴포넌트 props작명={ 보내는값 }></자식컴포넌트>


// 하위(자식) 컴포넌트 
function 자식컴포넌트(props) {
  return (
    <div> props.상위컴포넌트에서 작명한 이름 </div>
  );
}

 

// App.js
/* eslint-disable */

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';


function App() {

  let post = 'Restaurant';
  let postId = 'postId';
  let [title, setTitle] = useState(['Title1', 'Title2', 'Title3']);
  let [blogTItle, setBlogTitle] = useState('ReactBlog');
  let [like, changeLike] = useState([0, 0, 0]);
  let [modal, setModal] = useState(false);

  return (
    <div className="App">
      <div className="black-nav">
        <h4 id={postId} style={{ color: 'red', fontSize: '16px' }}>{blogTItle}</h4>
      </div>

      <button onClick={() => {
        let copy = [...title];
        copy[0] = 'New Title1';
        setTitle(copy);
      }}>Edit</button>

      {
        title.map(function (item, idx) {
          return (
            <div className="list" key={idx}>
              <h4 onClick={() => {setModal(!modal)}}>{item} <span onClick={() => {
                let copyLike = [...like];
                copyLike[idx] += 1;
                changeLike(copyLike);
              }}>❤</span> {like[idx]} </h4>
              <p>4월 26일</p>
            </div>)
        })
      }

	  // props로 title의 속성을 선언하고 부모가 갖고있는 title값을 
      // 하위 컴포넌트에게 전달한다.
      {modal === true ? <Modal title={ title }></Modal> : null}

    </div>
  );
}



// 파라미터로 전달을 받아 사용할 수 있다.
function Modal(props) {
  return (
    <div className='modal'>
      <h4>{ props.title[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}


export default App;

 

 

 

반응형

 

 

 

props를 여러개 선언하여 값을 전달해 줄 수 있다.

{/* 상위(부모) 컴포넌트 */}
{/* color와 title을 하위컴포넌트로 보낸다. */}
{modal === true ? <Modal color={'yellow'} title={ title }></Modal> : null}

{/* 하위(자식) 컴포넌트 */}
function Modal(props) {
  return (
  	// color로 값을 받아 사용한다.
    <div className='modal' style={{background: props.color}}>
      <h4>{ props.title[0] }</h4>	// title로 값을 받아 사용한다.
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}