React에서의 class는 React의 기능을 풀 파워로 사용할 수 있다.
하지만 class는 class만의 문법이 존재하고 장황하다.

반대로
function 스타일은 function 문법만 알면 사용이 가능하다.
그렇지만 class에 비해 기능이 부족하다.

함수(function) 스타일로 할 수 없는 대표적인 작업이
컴포넌트 내부에 state를 만들 수 없다.
또 component의 (생성, 변경, 소멸)에 대한 이벤트인 lifeCycle API 작업도 할 수 없었다.
즉, 함수 방식은 상위 컴포넌트가 시키는 일만 처리하는 단순한 컴포넌트에만 사용이 되었다.

하지만 최신 React에서는 hook이라는 개념이 도입되었다. 덕분에 함수 방식에서 내부에서 상태를 다룰 수 있게 되었고,
컴포넌트의 lifeCycle에 따라서 해야 할 작업을 정의할 수 있게 되었다.
심지어 function 스타일만의 간편함 또한 가지고 있다.

결론 !
class 스타일 = 대등 = function 스타일 + hook

function 스타일 작성법

function FuncComp(){
 return (
  <div className="container">
    <h2>function style component</h2>
  </div>
 );
}

class 스타일 작성법

class ClassComp extends React.Component{
 render(){
 return (
  <div className="container">
    <h2>class style component</h2>
  </div>
   );
 }
}

🧩 UseState()

Props

• props란 컴포넌트 끼리 값을 전달하는 수단이다.
• parent 컴포넌트에서 자식 컴포넌트로 데이터를 전할 때, props 가 사용.
• 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 를 직접 수정 할 수 는 없다.

props는 function 방식 또는 class 방식 양쪽 모두 사용이 가능하다.
하지만 state는 class 방식에서 사용 가능 했었는데 hook 때문에 함수 방식도 state 사용이 가능하다.

App 컴포넌트에서 FuncComp, ClassComp 에게 값 주기.

import React from 'react';

function App(){
 return(
  <div className="container">
   <h1>Hello World</h1>
   <FuncComp initNumber={2}></FuncComp> ☘️
   <ClassComp initNumber={2}></ClassComp> 🌿
  </div>  
 )
}

App에서 지정한 값을 props를 이용해 FuncComp 에게 적용하기. ☘️ Function

1. FuncComp(props) <- 이 함수를 react가 호출할 때 첫번째 파라미터 인자 값으로 전달된 props 값을 전달한다.

function FuncComp(props){
 return (
  <div className="container">
    <h2>function style component</h2>
    <p>Number : {props.initNumber}</p> ☘️ App에 있는 initNumber 값을 지정함. => props.initNumber
  </div>
 );
}

App에서 지정한 값을 props를 이용해 ClassComp 에게 적용하기. 🌿 Class

class ClassComp extends React.Component{
 render(){
 return (
  <div className="container">
    <h2>class style component</h2>
    <p>Number : {this.props.initNumber}</p>
  </div>
   );
 }
}

State

• state 는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있다.

props는 부모 컴포넌트가 설정하고, 컴포넌트 자신은 props를 바꾸지 못하는 특성이 있는 것과는 차이가 있다.
즉, props를 사용했는데도 state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하는 것에 있다.

Class ( State 응용하기 )

class ClassComp extends React.Component{
 state = {
  number : this.props.initNumber 🌿
  
  🌿 App 부모 컴포넌트에 등록되어 있는 initNumber의 값은 state를 사용하기 전에는 값을 변경할 수 없었다.
     하지만 state를 이용하여 number이라는 state 값 안에 등록시킴으로 부모 컴포넌트에서 props로 전달받은
     initNumber의 값을 변경시킬 수 있게 되었다.
 }
 render(){
 return (
  <div className="container">
    <h2>class style component</h2>
    <p>Number : {this.props.initNumber}</p>
    🌿 <input type="button" value="random" onClick={()=> 
    {this.setState({number:Math.random()})}.bind(this)}></input>
  </div>
   );
 }
}

🌿 버튼을 누르면 number의 값을 랜덤하게 생성하는 버튼을 구현하였다.
onClick 버튼 함수로 this.setState를 사용하면 기존의 state 값을 변경시킬 수 있다.
그러므로 원래 값이 2 였던 number가 this.setState({number: Math.random()})으로 인해 
랜덤한 수를 출력하는 state 값으로 바뀌었다.

💡 class 방식은 bind.(this)를 적어줘야 한다.

Function ( State 응용하기 ) + Hook

Function 방식에서 state를 사용할 수 없다고 하였다.
하지만 Hook을 사용함으로써 Function 방식도 컴포넌트 내부에서 state를 사용할 수 있게 되었다.
useState() 를 사용하면 된다.

• useState()의 특성 : 배열로 이루어져 있고 두개의 값으로 이루어져 있다.
  

1️⃣ useState의 첫번째 칸은 state 상태값 ! 

import React, {useState} from 'react'; 

function FuncComp(props){
let numberState = useState(); ☘️ numberState는 useState()로 인해 배열의 형태이며 두개의 값을 가지고있다. (특징)
let number = numberState[0]; ☘️ number은 배열인 numberState에 첫번째 값 즉, state값 을 가져온다. (상태값)
 return (
  <div className="container">
    ...
  </div>
 );
}

let numberState = useState(props.initNumber); (초기값) 🌿 useState()안에 props.initNumber을 넣어주면 (아래 사진 참조)
let number = numberState[0]; 🌿 number 값은 2 (상태값)

let numberState = useState(5); 🌿 useState()안에 5의 값을 넣어줌 => 5는 state의 초기값
let number = numberState[0]; 🌿 number 값은 5 => 5는 number의 상태값

2️⃣ useState의 두번째 칸은 상태값을 변경할 함수가 담기는 칸!

function FuncComp(props){
 let numberState = useState(props.initNumber); 🌿 (props.initNumber)은 useState의 초기값
 let number = numberState[0]; 🌿 상태값
 let setNumber = numberState[1] 🌿 상태값을 변경할 함수가 담기는 칸
 
 return(
 <div className="container">
  <h2>function style component</h2>
  <p>Number : {number}</p>
  <input type="button" value="random" onClick={()=> setNumber(Math.random())}></input>
 </div>
 )
}

🌿 setNumber()을 이용해 state값이 담긴 number의 값을 바꿀 수 있다.

즉!

⭐️

let [number,setNumber] = useState(초기값);

number : state값이 담긴 배열 칸
setNumber : state를 바꾸는 함수가 담긴 배열 칸

Class ( Fetch 데이터 받아서 받아온 데이터의 특정 값을 setState로 변경해주기 )

Class ApiExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data : ''
    }
  }
  callApi = () => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then(res => res.json())
      .then(json => {
        this.setState({
          data: json.title 
      });
    });
  }
  
  componentDidMount() {
    this.callApi();
  }
  
  render(){
   return (
    <div>{this.state.data ? this.state.data : "🔎 데이터를 불러오는 중 입니다."}
     // componentDidMount 보다 render() 가 더 먼저 실행 되기 때문에 data 의 값은 '' 이다. render() 가 실행 후 -> componentDidMount로 fetch로 받은 데이터가 data 값을 변경시켜준다.
     <div/>
   )
  }
}