클래스형 컴포넌트, state, props

클래스형 컴포넌트, 함수형 컴포넌트

import React from 'react';
import './App.css';

function App() {
  const name = 'react';
  return <div className = "react">{name}</div>
}

export default App;

 

import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>
  }
}

export default App;

 

함수형, 클래스형 컴포넌트의 차이점

 

함수형 컴포넌트

• state 기능 및 라이프 사이클 기능을 사용할 수 없다.
• 리액트 16.8부터 Hook을 이용해 보완
• 클래스형 컴포넌트보다 간단
• 클래스형 컴포넌트보다 메모리자원을 적게 사용함

 

클래스형 컴포넌트

• state, 라이프 사이클을 사용할 수 있다.
• 임의 메서드를 정의할 수 있음.
• render 함수가 반드시 필요.

 

props

  import React from 'react';

  const MyComponent = props => {
    return <div>안녕하세요 제 이름은 {props.name}입니다.</div>
  };

  export default MyComponent;

 

• props는 컴포넌트의 속성을 설정할 때 사용하는 요소
• props는 JSX 내부에서 { } 기호 안에 넣어 렌더링한다.

함수형 컴포넌트

import React from 'react';

const MyComponent = ({ name, children }) => {
  return (
    <div>
      안녕하세요 제 이름은 {name}입니다.<br />
      children 값은 {children}입니다.
    </div>
    );
};
export default MyComponent;    

 

 

클래스형 컴포넌트

import React, {Component} from 'react';

class MyComponent extends Component {
  render(){
    const {name, favoriteNumber, children} = this.props;
    return (
      <div>
        안녕하세요, 제 이름은 {name}입니다.<br/>
        children 값은 {children}입니다.<br/>
        제가 좋아하는 숫자는 {favoriteNumber}입니다.
      </div>
    );
  }
}
export default MyComponent;

children

태그 사이의 내용을 보여준다.

 

state

props는 부모 컴포넌트가 설정한 값을 컴포넌트 내부에서 읽기만 가능

state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미

함수형 컴포넌트와 클래스형 컴포넌트에서 state의 사용방식이 다르다.

클래스형 컴포넌트

import React, {Component} from 'react';

class Counter extends Component {
  state = {
    number:0,
    fixedNumber:0
  };
  render(){
    const {number, fixedNumber} = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <button
          onClick={()=>{
            this.setState({number:number+1});
          }}
        >
        +1
        </button>
      </div>
    );
  }
}
export default Counter;

constructor 안에서 this.state 값에 초깃값을 설정할 수도 있으며, constructor 없이 바로 state 초기값을 설정할 수 있다.

클래스형 컴포넌트의 state는 객체 형식이어야 한다.

this.setState 함수로 state의 값을 변경할 수 있다. 비동기 적으로 업데이트

 

함수형 컴포넌트

import React, {Component} from 'react';

const Say = () =>{
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요!');
  const onClickLeave = () => setMessage('안녕히 가세요!');

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1>{message}</h1>
    </div>
  );
};
export default Say;

 

함수형 컴포넌트에서는 useState 함수로 state를 사용한다.

useState 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꾸어 주는 함수이다.