React - Component - 3

React Component

component를 반복적으로 html에 선언해야 할 때는 map을 사용하여 반복적으로 component를 불러 올 수 있다.

// 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);
  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>


		// 괄호 안에 map을 선언하여 title변수에 있는 배열을 뿌려준다.
      {
        title.map(function (item, idx) {
          return (
          	// 반복문으로 생성한 태그에는 key 속성을 추가해야한다
            <div className="list" key={idx}>
            <h4>{ item }</h4>
            <p>4월 26일</p>
          </div>)
        })
      }

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

    </div>
  );
}


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


export default App;

반복문 속 html태그의 key 속성은 각 element의 대한 변경, 추가, 또는 삭제에 대한 식별을 갖을 수 있고, element의 고유성을 부여하여때문에 key 속성을 선언해야한다.

 

 

 

반응형

 

 

 

JSX 에서는 괄호{} 속에 if, for문을 사용할 수 가 없어 이를 대신할 반복문으로 map을 사용하여 반복적으로 태그및 component를 불러와 보여줄 수 있다.

map안에서 onClick같은 이벤트를 선언해 기능을 구현할 수 도 있다.

// App.js

  // useState의 값을 3개의 배열로 선언한다.
  let [like, changeLike] = useState([0, 0, 0]);

// 이전에 클릭시 증가하는 기능을 넣어 구현할 수 있다.
   {
        title.map(function (item, idx) {
          return (
            <div className="list" key={idx}>
              <h4>{item} <span onClick={() => {
                let copyLike = [...like];	// 깊은복사로 useState의 값을 복사한다.
                copyLike[idx] += 1;	// 각각의 배열의값을 1씩 증가한다.
                changeLike(copyLike);
              }}>❤</span> {like[idx]} </h4>
              <p>4월 26일</p>
            </div>)
        })
      }