[220425] 함수형 컴포넌트, Hook, useState, useEffect

단번에 리액트 시작하기

//function은 임의로 정한 디렉토리명
$ npx create-react-app function 
$ cd function
$ npm run start

 

---

 

자바스크립트와 리액트의 함수

//자바스크립트식
function a(){
    console.log('hello world')
}
a()

//리액트식 
function A(){
    return <div>Hello world</div>
}
<A />

 

객체를 만드는 리액트

//JSX ->(babel)-> Javascript
//클래스 문법, 객체를 만듬
//컴포넌트의 목적은 객체라고도 할 수 있다
class App extends React.Component{
    render(){
        return(
            <span className="color">
                <button className="btn">버튼1</button>
                <button className="btn">버튼2</button>
            </span>

        )
    }
}

//이런식으로 객체 만듬
{
    type:'span',
    props:{
        className:'color',
        children:[
            {
                type:'button',
                props:{
                    className:'btn',
                }
            },{
                type:'button',
                props:{
                    className:'btn',
                }
            },
        ]
    }
}

 

 

함수 실행순서가 다른 자바스크립트와 리액트

<Form>
    <Input />
</Form>

function Form(callback){ callback() }
function Input(){}
Form(input)
//자바스크립트라면 바깥쪽인 Form 부터 실행이 되겠지만
//리액트는 안쪽인 Input부터 실행된다

 

---

 

Function Component 함수형 컴포넌트 : Hook(함수들)

여태껏 배운 함수형들은 다음과 같이 생겼다.

function App(){}
const App = () => {}

하지만, 상태생성과 생명주기를 할 수 없었다.

이 두가지를 할 수 있게 만든 함수 모음을 hook이라고 한다.

특징 : 앞에 use가 붙음.

예) useState, useReducer useEffect ... 비슷하게 작동하는거지 아예 같은건 아님

클래스 컴포넌트 안에서는 사용 못함. 함수형 컴포넌트 안에서만 사용가능.

 

useState() 선언하는 법

사용하는 이유 : 함수형 컴포넌트 안에서는 this를 사용할 수 없기 때문에 사용한다.

장점 : 어렵게 this를 사용하면서 value값을 끌어오지 않아도 된다. 필요한 정보값만 잘라서 가져올 수 있다.

단점 : render()부분이 호출될때마다 함수형 컴포넌트 내부 코드가 모두 실행된다.

const state = useState(0) //return [초기값,상태를 변하게하는 함수]
const count = state[0]
const setCount = state[1]

// 위 코드 세줄과 같은 한줄코드
const [count,setCount] = useState(0)

 

예제)

import React,{useState} from 'react'

const State = () => {
//hooks 규칙 : 무조건 이 공간에서만 작성 가능 (작성시작)

    const [value, setValue] = useState('infoo')
    const [values,setValues] = useState('bear jumping')
    // const [list,setList] = useState([{userid:'web7722',content:'helloooo'}])
    //여태까지는 필요없는 정보값도 다 가져올 수 밖에 없었지만
    //useState를 통해 필요한 정보만 쪼개서 가져올 수 있다
    
    const handleClick = () => {
        setValue('hello world1234')
        setValues('rabbit')
    }

//hooks 여기까지 (작성 완료)
    return(
        <div>
            <button onClick={handleClick}>버튼</button>
            {value} <br />
            {values}
        </div>
    )
}

export default State

 

 

---

 

useState를 사용해서 클릭한 수를 출력하기

import React,{useState} from 'react'

const State = () => {
    const [count,setCount] = useState(0) 
    return(
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>
                Click me
            </button>
        </div>
    )
}

export default State

 

---

 

생명주기와 비슷한 기능을 구현하는 useEffect

리액트에서 중요한 네가지 : class / State / Props / 생명주기(라이프사이클)
그 중에서 useEffect는 라이프사이클처럼! 굴러갈 수 있는 기능을 가지고있다.
라이프 사이클에서도

componentDidMount / componentDidUpdate / componentWillUnmount

이 세가지 기능을 모두 구현한다는 장점이 있고,

여러 기능을 사용하기위해서 코드가 난잡해진다는 단점이 있다.
보통 이펙트라고 주로 부른다.

import React,{useState, useEffect} from 'react'

const Effect = () => {
    const [count, setCount] = useState(0)
    //인자값 2개
        //1. 콜백 함수 들어감 (필수)
        //2. depas =  array (옵션)
        //()=>{}, []
    useEffect(()=>{
        document.title = 'asdf'
        console.log('hello cat dog horse')
        return()=>{
            console.log('나 종료됨') //종료기능이라고 가정하자.
        }// 종료기능일때 componentWillUnmount처럼 실행됨
    },[count])
    //빈 배열일때는 componentDidMount처럼 최초에 한번 실행
    //빈 배열이 아닐경우는 componentDidUpdatec처럼 count가 바뀔때마다 재실행

    return(
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount( (prev) => prev+1) }}>
                Click me
            </button>
        </div>
    )
}

export default Effect