React Hooks

React Hooks란 2018년 발표된 class 없이 state를 사용할 수 있는 기능입니다.
기존 리액트는 주로 클래스 컴포넌트를 사용하였는데 리액트 혹스는 함수형 컴포넌트를 사용한다.

1. Class Component Vs Functional Component

Class Component	Functional Component
많은 기능 제공	적은 기능 제공
긴 코드양	짧은 코드양
복잡한 코드	심플한 코드
더딘 성능	빠른성능

1-1 생명주기

Functional Component 어떤 기능을 사용하지 못하는 걸까? => React Hooks가 없었을 때 생명주기 사용 불가
현제 React Hooks로 생명주기도 사용이 가능하다.

1-2. HOC (wrapper) 컴포넌트를 줄일 수 있다.

1) HOC?
Higher Order Component의 약자로 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수이다.
2) Hooks.에서는 HOC 대신 Custom Hooks를 이용하여 컴포넌트를 만들어서 처리.
그로인해 wrapper가 많아지는 일을 방지한다
3) Hooks에서 state 업데이트
const[name,setName]=useState("") 방식 으로 setName을 애용해서 state를 업데이트 시킨다

2. 변화된 구조

2-1. 함수형 컴포넌트

클래스형 컴포넌트와 다르게 Component를 가져와서 사용하지 않아도 된다.

import React from 'react'
import './ExpenseForm.css'
import { MdSend } from 'react-icons/md'

const ExpenseForm=()=>{
    return (
      <form>
        <div className='form-center'>
            <div className='form-group'>
                <label for='charge'>지출 항목</label>
                <input type='text' className='form-control' id='charge' name='charge' placeholder='예) 렌트비'></input>
            </div>
            <div className='form-group'>
                <label for='amount'>비용</label>
                <input type='number' className='form-control' id='amount' name='amount' placeholder='예) 1000'></input>
            </div>
        </div>
        <button type='submit' className='btn'>
            제출
            <MdSend className='btn-icon'></MdSend>
        </button>
      </form>
    )
}

export default ExpenseForm

2-2. 내부 함수

const handleDelete = (id) => { .. }
📑 App.js

const handleDelete = (id) => {
        const newExpenses = expenses.filter(expect=> expect.id !== id);
        setExpenses(newExpenses);
    }

2-3. 데이터 생성 및 사용

1) 데이터 생성

const [변수이름, set변수이름] = useState("")

변수이름 : getter
set변수이름 : setter
userState : getter,setter를 리턴하고 초기 state값을 정하는 Hook

📑 App.js

    const [expenses, setExpenses] = useState([
        { id: 1, charge: "렌트비", amount: 16000 },
        { id: 2, charge: "교통비", amount: 20000 },
        { id: 3, charge: "숙박비", amount: 200000 },
        { id: 4, charge: "식비", amount: 56000 }
    ]);

2) 부모 컨포넌트 내부 데이터 사용

데이터 전달 : initialExpenses={변수이름}
데이터 내부 불러오기 : set변수이름(매개변수);

📑 App.js

const App = ()=>{

    const [expenses, setExpenses] = useState([
        { id: 1, charge: "렌트비", amount: 16000 },
        { id: 2, charge: "교통비", amount: 20000 },
        { id: 3, charge: "숙박비", amount: 200000 },
        { id: 4, charge: "식비", amount: 56000 }
    ]);


    // 클릭 이벤트 함수 생성
    // 아이템 제거
    const handleDelete = (id) => {
        const newExpenses = expenses.filter(expect=> expect.id !== id);
        setExpenses(newExpenses);
    }


    return (
        <main className="main-container">
            <h1>예산 계산기</h1>
            <div style={{width: '100%', background:'white',padding:'1rem'}}>
                {/* Expense Form */}
                <ExpenseForm />
            </div>
            <div style={{ width: '100%', background: 'white', padding: '1rem' }}>
                {/* Expense list */}
                <Expenselist initialExpenses={expenses} handleDelete={handleDelete} />
            </div>
            <div style={{display:'flex', justifyContent:'end',marginTop:'1rem'}}>
                <p>
                    총 지출:
                    <span>원</span>
                </p>
            </div>
        </main>
    )


}

//내보내기 default - 메인으로 내보냄
export default App;

3) 자식 컨포넌트 데이터 가져오기

props 사용

가져오기 : 컨포넌트 함수에서 props 매개변수로 가져오기
사용하기 : props.initialExpenses

📑 Expenselist.js

import React from 'react'
import './ExpenseList.css'
import ExpenseItem from './ExpenseItem'
import { MdDelete } from 'react-icons/md'

const Expenselist = (props)=>{
      console.log(initialExpenses);
    return (
      <>
        <ul className='list'>
            {props.initialExpenses.map(expense=>{
                return (
                    <ExpenseItem 
                        expense={expense}
                        key={expense.id}
                        handleDelete={props.handleDelete}
                    />
                )
            })}
        </ul>
        <button className='btn'>
            목록지우기
                <MdDelete className='btn-icon'></MdDelete>
        </button>
      </>
    )

}

export default Expenselist

구조분할 할당 (Destructuring)
배열이나 구조의 속성을 해채하여 개별 변수에 담아주는 것

props 객체 개별 변수 전달 = {initialExpenses, handleDelete}