React - Class

React class

React 에서 class 를 사용할 수 있다.

class Modal2 extends React.Component { // React 에서 Component를 받아온다.
  constructor() {	// props를 받아온다.
    super();	// 받아온 props를 호출한다.
  }

  render() {	//	jsx를 반환한다.
    return (	// jsx
      <div>Hello!</div>
    )
  }
}

React 에서 extends로 react의 component를 받아와서 class를 사용할 수 있다.

constructor에서 부모에게 porps를 받아오고 super로 호출하여 사용 할 수 있다.

render 함수로 jsx 를 반환하여 화면에 보여줄 수 있다.

 

 

 

/* eslint-disable */

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
import React from 'react';	// React 를 import한다.


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);
  let [detailTitle, setDetailTitle] = useState(0);
  let [inputVal, setInputVal] = useState('');

  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);
                setDetailTitle(idx);
              }}>{item} <span onClick={() => {
                let copyLike = [...like];
                copyLike[idx] += 1;
                changeLike(copyLike);
              }}>❤</span> {like[idx]} </h4>
              <p>4월 26일</p>
              <button onClick={() => {
                let tempTitle = [...title];
                tempTitle.splice(idx, 1);
                setTitle(tempTitle);
              }}>삭제</button>
            </div>)
        })
      }

      <input onChange={(e) => {
        setInputVal(e.target.value);
      }}></input>
      <button onClick={() => {
        let tempTitle = [...title];
        let tempLike = [...like];

        tempLike.unshift(0);
        tempTitle.unshift(inputVal);
        setTitle(tempTitle);
        changeLike(tempLike);
      }}>추가</button>

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

      <Modal2></Modal2>	//	class 명을 태그처럼 사용 할 수 있다.

    </div>
  );
}


function Modal(props) {
  return (
    <div className='modal'>
      <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>
  );
}

// class를 사용하여 modal을 만든다.
class Modal2 extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div>Hello!</div>
    )
  }
}

export default App;

Hello라는 글씨가 나타난다.

 

 

 

반응형

 

 

 

class에서 state를 만들어 사용할 수 있다.

class Modal2 extends React.Component {
  constructor() {
    super();
    this.state = {	// this안에 state를 object로 선언한다.
      name: 'zelord',
      age: 20
    }
  }

  render() {
    return (
      <div>Hello! {this.state.name}</div>	// 선언된 state를 호출한다.
    )
  }
}

 

this.state에 object형식으로 값을 넣어 render함수에 호출하여 사용 할 수 있다.

 

 

state의 수정은 setState를 사용하여 변경 할 수 있다.

class Modal2 extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'zelord',
      age: 20
    }
  }

  render() {
    return (
      <div>
        Hello! {this.state.age}
        <button onClick={() => {
          this.setState({ age: 30 });	// setState를 사용하여 값을 변경한다.
        }}>
          버튼
        </button>
      </div>
    )
  }
}

버튼을 클릭하면 setState함수가 동작해 age의 값을 변경 할 수 있다.