[React]리액트 함수형 컴포넌트와 클래스형 컴포넌트 & Props와 State

[ Props와 State ]

 

 Props는 컴포넌트 외부에서 컴포넌트에게 주는 객체형 데이터입니다. 즉, 상위 컴포넌트에서 하위 컴포넌트로부터 데이터를 넘겨주는 것입니다. 읽기 전용 데이터로 수정 불가능합니다. 

 

 State는 컴포넌트 내부에서 변경할 수 있는 데이터입니다. props와는 반대로 해당 컴포넌트 안에서 데이터를 수정할 수 있습니다. 

 

 Props와 State는 모두 각각 변경이 발생하면, 리렌더링이 발생할 수 있습니다. 

 

 

★ Render 함수와 Props & State

 

 Render 함수는 Props와 State를 바탕으로 컴포넌트를 그립니다. 그리고 props와 state가 변경되면 컴포넌트를 다시 그리는 즉, 리렌더링이 발생합니다. 

 

 

[ 함수형 컴포넌트 ]

import React from 'react';

const FunctionComp = () => {
  
  return (
    <div>
      
    </div>
  );
};

export default FunctionComp;

 

★ 함수형 컴포넌트의 특징

 

1. JSX를 return문을 사용해서 반환한다. 

 

2. state와 lifeCycle 관련 기능을 사용할 수 없다. 

 

 함수형 컴포넌트는 state와 lifeCycle 관련 기능을 사용할 수 없기 때문에 Hook으로 이 기능을 대체합니다. 

 useState 훅을 통해 state를 사용합니다.

 

3. props를 바로 호출할 수 있다. 

 

4. 컴포넌트형.defaultProps = { } 로 props의 기본값을 설정한다. 

 

import React, { useState } from 'react';

const FunctionComp = ({ message }) => {
  // state
  const [count, setCount] = useState(0);

  // 이벤트 핸들링
  const onClick = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <h1>{message}</h1>
      <button type="button" onClick={onClick}>{count}</button>
    </div>
  );
};

// props 기본값 설정
FunctionComp.defaultProps = {
  message: 'hello world'
}

export default FunctionComp;

 

 

 

 

 

[ 클래스형 컴포넌트 ]

import React, { Component } from 'react'

class ClassComp extends Component {
  render(){
    return(
      <div>
      
      </div>
    )
  }
}

export default ClassComp;

 

★ 클래스형 컴포넌트의 특징

 

1. JSX를 render() 함수를 사용해서 반환한다. 

 

2. state와 lifeCycle 관련 기능을 사용할 수 있다

 

3. class 키워드로 시작하며 React.Component로 상속 받는다. 

 

3. props를 조회할 때 this 키워드를 사용해야 한다. 

 

4. 컴포넌트 내부에서 static defaultProps = { } 로 props의 기본값을 설정한다. 

 

 

import React, { Component } from 'react'

class ClassComp extends Component {
  // props 기본값 설정
  static defaultProps = {
    message: 'hello world'
  }

  // state 사용법(1)
  // state = {
  //   count: 0
  // }

  // state 사용법(2)
  constructor(props){
    super(props);
    this.state = {
      count: 0
    }
  }

  // 이벤트 핸들링
  onClick = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render(){
    return(
      <div>
        <h1>{this.props.message}</h1>
        <button type="button" onClick={this.onClick}>{this.state.count}</button>
      </div>
    )
  }
}

export default ClassComp;