React - Component - 2

React Component

component를 동적으로 처리하려면 useState를 사용하여 component를 제어할 수 있다.

/* 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);
  
  // component를 제어할 useState를 선언한다.
  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>

      <div className="list">
        <h4>{title[0]} <span onClick={() => { changeLike(like + 1) }}>❤</span> {like} </h4>
        <p>4월 26일</p>
      </div>
      <div className="list">
        <h4>{title[1]}</h4>
        <p>4월 26일</p>
      </div>
      <div className="list">
        <h4>{title[2]}</h4>
        <p>4월 26일</p>
      </div>
		
      // 삼항연산자로 useState 상태변경에 따라 component를 제어한다.
      { modal === true ? <Modal></Modal> : null }

    </div>
  );
}


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


export default App;

 

return() 안에 직접 if문을 사용할 수 없기때문에 삼항연산자(ternary operator)를 사용하여 component문을 제어한다.

modal값을 true로 변경하면 component가 나타난다.

// modal의 초기값을 true로 설정한다.
let [modal, setModal] = useState(true);


// return() 안에 있는 modal 이 삼항연산자 조건에 만족하여 component가 보여진다.
{ modal === true ? <Modal></Modal> : null }

 

 

 

반응형

 

 

 

 

동적으로 처리하기 위해 useState의 상태값을 변경하면 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>

      <div className="list">
        <h4>{title[0]} <span onClick={() => { changeLike(like + 1) }}>❤</span> {like} </h4>
        <p>4월 26일</p>
      </div>
      <div className="list">
        <h4>{title[1]}</h4>
        <p>4월 26일</p>
      </div>
      <div className="list">
      	{/* onClick 이벤트로 modal값을 변경해주도록 한다. */}
        <h4 onClick={() => {setModal(modal = !modal)}}>{title[2]}</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;

3번째 리스트의 Title을 클릭할때 마다 component를 제어할 수있다.