React - Component - 1

React Component

React Component 란 UI를 재사용 할 수 있도록 개별적으로 여러 조각으로 나누는 단위이다.

component를 함수로 생성해서 사용할 수 있다.

/* App.css */

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

// App.js

/* eslint-disable */

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

// App() 또한 컴포넌트이다.
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);

  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';
        console.log('title: ' + title);
        console.log("copy: " + copy);
        console.log(copy === title);

        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>

	  {/* 함수로 생성된component를 적용할 때 태그로 불러와 적용한다. */}
      <Modal></Modal>
    </div>
  );
}

// 함수표현식으로 component 선언
const Modal2 = () => {
  return (
    <div className='modal'>
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

// 함수선언식으로 component 선언
function Modal() {
  return (
    <div className='modal'>
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

export default App;

 

함수로 component를 생성 한 후 return() 안에 html코드를 적어서 <함수명></함수명> 또는 <함수명 /> 태그를 사용하여 컴포넌트를 적용할 수 있다.

 

컴포넌트 return 안에는 하나의 태그로 묶어줘야한다.

function Modal() {
  return (
  
    <div className='modal'>
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
    
    // 하나의 태그로 감싸져있지 않아서 에러가 나타난다.
    <div></div>
  );
}

 

 

 

반응형

 

 

 

만약 2개의 태그를 사용하고 싶을때는 fragment 문법을 사용해서 빈 태그<> 를 만들어 사용할 수 있다.

function Modal() {
  return (
  	// fragment 문법으로 두개의 태그가 존재할 수 있다.
    <>	
      <div className='modal'>
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
      <div></div>
    </>
  );
}