React- Component

리액트의 컴포넌트 선언방식은 두가지로 나뉜다. 첫번째는 클래스형 컴포넌트, 두번째는 함수형 컴포넌트이다.

이제 이 두가지 선언방식에 대해서 알아보자.

1. Class Component

• 클래스형 컴포넌트에서는 Component를 상속받아야하고 render() 함수가 필수적으로 있어야한다.
• state와 LifeCycle API 사용이 가능하다.
• 임의 메서드를 정의할 수 있다.
• 과거에는 클래스 컴포넌트에서만 state와 LifeCycle API 사용할수 있었기 때문에 state가 변경되고 업데이트가 되어야하면 클래스 컴포넌트를 만들었다.
• 프로퍼티를 사용해야할때 this.props 를 사용하여 가져와야한다.

import React, {Component} from 'react';

class App extends Component{
 	render(){
      const {id,pass} = this.props;
      return( 
        <>
         <div className="react">아이디 : {id} </div>
         <div className="react">비밀번호 : {pass} </div>
        </>
      );
    }
}

export default App;

• state를 사용해야할때는 생성자 메서드를 사용하여 초기 state값을 설정한다. 이때 super(props)를 호출해주어야 한다.
  this.setState 함수로 state값을 변경할 수 있다.

import React, {Component} from 'react'

class Counter extends Component {

    constructor(props) {
        super(props); //자바스크립트 에서는 super는 부모 클래스 생성자를 가리킨다(리액트에서는 React.Component)
        this.state = {
            Num : 0
        };
    }

    render(){
        const {Num} = this.state;
        return(
            <div>
                <h1>값 : {Num}</h1>
                <button
                    onClick={()=>{
                        this.setState({
                            Num : Num + 1
                        });
                    }}
                >
                    +1
                </button>
            </div>
        );
    }
}

export default Counter;

2. Functional Component

• 클래스 컴포넌트와 비교해서 간결하게 코드를 작성할 수 있다. 함수 자체가 렌더함수이기 때문에 render()함수를 사용하지 않아도 된다.
• 메모리 자원을 덜 사용한다.
• React 16버전이전까지는 함수형 컴포넌트에서는 state 및 lifecycle Api 기능을 지원해주지 않아서 변화가 없는 정적인 컴포넌트를 만들 때 사용했다.
• 프로퍼티를 사용해야할때 parameter로 props를 전달받아 가져온다.

import React from 'react';

const App = (id,pass) => {
      return(
        <>
         <div className="react">아이디: {id}</div>
         <div className="react">비밀번호: {pass}</div>
        </>
      );
}

export default App;

• 함수형 컴포넌트에선 setState로 state값을 변경한다.

import React , {useState} from 'react';
const App = () => {
  //첫번째 원소는 state이름, 두번째원소는 state의 값을 변경해주는 함수이름이다.
  const[num, setNum] = useState(0); //useState의파라미터는 초기값이다.
  
  const increase = () => {
   	setNum(num +1)
  }

  return (
     <>
      <h1>{num}</h1>
      <button onClick ={increase} >+1</button>
     </>
  );
}
export default App;

현재 리액트 공식 매뉴얼에는 컴포넌트를 작성할때 클래스컴포넌트보다 함수형 컴포넌트를 사용하도록 권장하고있다.

함수형컴포넌트의 state와 LifeCycle사용이 불가능하다는 단점을 리액트 16버전부터 Hook이라는걸 지원하여 보완하였다.

공식 매뉴얼에서 함수형 컴포넌트를 사용하도록 권장하고있다고 하더라도 유지보수를 진행해야할 상황이 있을 수 있기때문에 클래스형 컴포넌트도 잘알아두도록하자.