React - props - 2

React props

React props 를 사용하여 하위컴포넌트의 html 을 동적으로 변경가능 하도록 할 수 있다.

/* eslint-disable */

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


function App() {

  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);
  
  // 하위 컴포넌트의 동적 변경을 위한 state 생성
  let [detailTitle, setDetailTitle] = useState(0);

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

      {
        title.map(function (item, idx) {
          return (
            <div className="list" key={idx}>
              <h4 onClick={() => {
                setModal(true);
                {/* onclick 함수로 클릭 시 state를 변경하여 하위 컴포넌트도 재랜더링한다. */}
                setDetailTitle(idx);
              }}>{item} <span onClick={() => {
                let copyLike = [...like];
                copyLike[idx] += 1;
                changeLike(copyLike);
              }}>❤</span> {like[idx]} </h4>
              <p>4월 26일</p>
            </div>)
        })
      }
      
	  {/* 생성된 state의 변수를 하위 컴포넌트로 props를 전송한다. */}
      {modal === true ? <Modal setTitle={setTitle} title={title} detailTitle={detailTitle} ></Modal> : null}

    </div>
  );
}


function Modal(props) {
  return (
    <div className='modal'>
      {/* 상위에서 받은 props를 적용한다. */}
      <h4>{props.title[props.detailTitle]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
      <button onClick={() => {
        let copy = [...props.title];
        copy[0] = 'My Title1';
        props.setTitle(copy);
      }}>Edit Title</button>
    </div>
  );
}




export default App;

 

 

 

반응형

 

 

 

state와 prop를 이용하여 하위 컴포넌트도 재랜더링으로 동적화면을 만들어 적용할 수 있다.