*클래스형 컴포넌트

컴포넌트를 선언하는 방식은 두 가지 입니다., 하나는 함수형 컴포넌트이고, 또 다른 하나는 클래스 형 컴포넌트 입니다.

import React, { Component } from 'react';

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

export default App;

클래스형 컴포넌드와 함수형 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것입니다.

*props

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소입니다.

JSX내부에서 props 렌더링

App.js

import React, { Component } from "react";
import MyComponent from "./MyComponent";

class App extends Component {
  render() {
    return (
      <div>
        <MyComponent>react</MyComponent>
      </div>
    );
  }
}

export default App;

MyComponent.js

import React from "react";

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

MyComponent.defaultProps = {
  name: "기본이름",
};

export default MyComponent;

*propTypes를 통한 props 검증

import React from "react";
import PropType from "prop-types";

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

MyComponent.defaultProps = {
  name: "기본이름",
};

MyComponent.propTypes = {
  name: PropType.string,
  favoritNumber: PropType.number.isRequired,
};

export default MyComponent;

*state

리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있습니다.

리액트에는 두 가지 종류의 state가 있습니다. 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state입니다.

import React, { Component } from "react";

class Counter extends Component {
  state = {
    number: 0,
    fixedNumber: 0,
  };
  render() {
    const { number, fixedNumber } = this.state; //state 조회할 때는 this.state로 조회합니다.
    return (
      <div>
        <h1>{number}</h1>
        <h2>바뀌지 않는 값: {fixedNumber}</h2>
        <button
          //onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정합니다.
          onClick={() => {
            //this.setState를 사용하여 state에 새로운 값을 넣을 수 있습니다.
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;

화살표 함수에서 값을 바로 반화하고 싶다면 코드 블록 {}를 생략하면 됩니다.
화살표 함수에서 바로 객체를 반환하도록 했기때문에 ({})와 같은 형태로 코드가 이루어집니다.

*함수형 컴포넌트에서 useState 사용하기

함수를 호출하면 배열이 봔환되는데요, 배열의 첫 번째 원소는 현재 상태이고, 두 번째 원소는 상태를 바꾸어 주는 함수입니다. 이 함수를 세터 함수라고 부릅니다. 그리고 배열 비구조화 할당을 통해 이름을 자유롭게 정해 줄 수 있습니다.

import React, { useState } from "react";

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

  const [color, setColor] = useState("black");

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1 style={{ color }}>{message}</h1>
      <button style={{ color: "red" }} onClick={() => setColor("red")}>
        빨간색
      </button>
      <button style={{ color: "green" }} onClick={() => setColor("green")}>
        초록색
      </button>
      <button style={{ color: "blue" }} onClick={() => setColor("blue")}>
        파랑색
      </button>
    </div>
  );
};

export default Say;