React-Hooks

❓ React-Hooks란?

• React에서 만든 함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 하는 도구
• 쉽게 설명하면, Hooks가 있기 때문에 간단한 함수형 컴포넌트로 클래스형 컴포넌트를 대신할 수 있다는 것이다.
• 대표적인 Hooks에는 useState, useEffect가 있다.

클래스형

// 클래스형
import { Component } from "react";

class New extends Component {
    constructor(props){
        super(props)    // 다른 컴포넌트한테 받은 데이터
        this.state = {} // 컴포넌트 안에 보관해둘 데이터
    }

    componentDidMount(){
        // 컴포넌트가 최초 그려진 후 실행
    }

    componentDidUpdate(){
        // 컴포넌트가 변경되었을때 실행
    }

    render(){
        return <div>이것은 클래스형 컴포넌트</div>
    }
}

export default New

함수형 (Hooks 사용)

// 함수형 컴포넌트 ( hooks 사용 )
import { useState,useEffect} from "react";

function New(props){    // 다른 컴포넌트한테 받은 데이터
    const [state] = useState({})    // 컴포넌트 안에 보관해둘 데이터

    useEffect(() => {
        // 컴포넌트가 최초로 그려진 후 실행
    })

    useEffect(() => {
        // 컴포넌트가 변경되었을때 실행
    })

    return <div>이것은 함수형 컴포넌트</div>
}

export default New

🔎  State란 무엇인가

• State는 리액트 컴포넌트에서 데이터를 담기 위한 상자이다.
  • state: 컴포넌트에서 사용하는 변수
  • setState: 컴포넌트에서 사용하는 변수를 바꿔주는 기능
  • useState: 컴포넌트에서 사용하는 변수를 만들어주는 기능

useState로 State 변수 만들고, 바꾸기

// 리액트 컴포넌트에서 변수 만들기
const [classmate] = useState("철수") // 변수명, 변수 만드는 기능, 담을 내용

// 리액트 컴포넌트에서 변수 바꾸기
const [friend, setFriend] = useState("영희")
setFriend("크리스")

리액트에서 let을 안쓰고, state를 변수로 사용하는 이유

• 리액트 컴포넌트는 앞쪽의 화면에 보여지는 부분과 뒷쪽에 데이터를 관리하는 부분으로 나눌 수 있다.
• 만약 단순히 javascript 변수를 이용해서 '좋아요'를 화면에 그렸다면, '좋아요'가 증가해서 변경되었을 때, 뒷쪽의 데이터 부분만 변경되고 앞쪽 화면에는 반영이 되지 않는다.
• 하지만, 컴포넌트 변수 state를 사용해서 화면에 그리고, setState()를 사용해서 '좋아요'를 변경하면, setState() 안에서 화면을 새롭게 그리라는 명령이 실행되어 변경된 데이터가 화면에 새로 그려진다.