coding develop

컴포넌트를 선언하는 방식은 두 가지 입니다.

하나는 함수형 컴포넌트이고, 또 다른 하나는 클래스형 컴포넌트 입니다.

함수형 컴포넌트

function App() {

  const name = "리엑트";
  return (
    <div>
      {name}
    </div>
  );
}

export default App;

클래스형 컴포넌트

class App extends Component {
  render(){
    const name = "리엑트";
    return (
      <div>
        {name}
      </div>
    );
  }
    
}

export default App;

클래스형 컴포넌트에서는 render 함수가 꼭 있어야 하고,

그 안에서 보여 주어야 할 JSX를 반환해야 합니다.

두 컴포넌트의 역할은 똑같습니다.

다만 차이점은 , 

클래스형 컴포넌트는 state 기능 및 라이프사이클 기능을 사용 할 수 있고

임의 메서드를 정의 할 수 있습니다. 

예제

• 함수형 컴포넌트

import React, { Component, useState } from 'react';




const  EventPractice = () => {
    
    const [username , setUsername] = useState('');
    const [message , setMessage] = useState('');

    
    const handleChange =(e) =>{
       setUsername(e.target.value);
       setMessage(e.target.value);
    }

    const handleClick = () =>{
        const {username} = this.state;
        //비구조화 할당
        alert(username + ':'+this.state.message);
        setMessage('');
        setUsername('');
    }
    
    
    return (
       
        <div>
            <h1>이벤트 연습</h1>
            <input
                type="text"
                name="username"
                placeholder="사용자 명"
                value= {username}
                onChange={handleChange}
                />
            <input
                type="text"
                name="message"
                placeholder="아무거나 입력하세요"
                value= {message}
                onChange={handleChange}
                />
                <button onClick= {handleClick}>확인</button>
        </div>
    );

};

export default EventPractice;

• 클래스형 컴포넌트

class  EventPractice extends Component {
    
    state = {
        username : '',
        message: ''
    }

    
    handleChange =(e) =>{
        this.setState({
            [e.target.name]: e.target.value
        });
    }

    handleClick = () =>{
        const {username} = this.state;
        //비구조화 할당
        alert(username + ':'+this.state.message);
        this.setState({
            username : '',
            message:''
        });
    }
    render(){
    const {message} = this.state;
    //비구조화 할당
    return (
        <div>
            <h1>이벤트 연습</h1>
            <input
                type="text"
                name="username"
                placeholder="사용자 명"
                value= {this.state.username}
                onChange={this.handleChange}
                />
            <input
                type="text"
                name="message"
                placeholder="아무거나 입력하세요"
                value= {message}
                onChange={this.handleChange}
                />
                <button onClick= {this.handleClick}>확인</button>
        </div>
    );
}
};

export default EventPractice;