hooks 읽기 시도

입문

지금 React를 배우고 있는 상태입니다., 작년에 React hooks는 항상 근처에서 떠들썩하다고 생각해서 어떤 물건인지 잡으면서 텍스트로 남겼어요.
개인의 필기 수준입니다.용서해 주세요.
다음은 공식 문서를 참고하십시오.
연계 배치

간단한 구성 요소 복습

React의 구성 요소 정의는 클래스 구성 요소와 함수 구성 요소를 포함합니다.
클래스 어셈블리는 상태, 라이프 사이클 방법 및 정밀 드로잉 제어를 수행할 수 있는 어셈블리를 생성하는 데 사용됩니다.
함수 구성 요소는 Hooks를 사용할 수 있기 전에state(상태)를 가지고 있을 수 없습니다. 전달된 값만 묘사하는 구성 요소입니다.(열심히 하면 컨디션도 조절할 수 있을 것 같은데...)
따라서 Hooks가 등장하기 전에 구성 요소가 상태가 없다는 것을 알면 더욱 간단하게 실현할 수 있는 함수 구성 요소로 실현하고 상태를 가져야 할 때 클래스 구성 요소를 재구성하는 것이 현장에서 이루어진 것이 아닐까요?
만약 모든 기능을 실현할 수 있다면 처음부터 학급 구성 요소를 사용하면 되지 않겠습니까!...한순간에 그렇게 생각했지만 응용 프로그램 개발에서 클래스 구성 요소에 방법을 가득 채우는 상황을 상상해 보면 시야가 나빠질 것 같아서...느낌

React Hooks

지금까지 Hooks는 전달 값만 그리는 함수 구성 요소의 기능을 확장했다.(클래스 구성 요소를 통해state만 관리할 수 있지만 Hooks의 등장으로 함수 구성 요소도 가능)
함수 구성 요소란 중요한 것은 함수이기 때문에 클래스 구성 요소보다 간단하고 Hooks의 기능을 통해 상태를 유지할 수 있다는 것이다.
그럼, 제가 실제로 써 볼게요.
우선react에서useState라는 방법을 가져옵니다.
import useState

import React, { useState } from 'react';

이것useState은 매개 변수에 초기 값을 제공할 수 있습니다.console.log에서 useState가 무엇을 반환하는지 확인하기
다음 상황에서 숫자 0과 함수를 포함하는 것을 볼 수 있습니다.
사용자 상태 반환값 확인

import React, { useState } from 'react';

const App = () => {
    const state = useState(0);
    console.log({state});
};

그룹에는 초기 값과 함수가 포함되어 있는 것을 볼 수 있습니다.useState 항상 두 요소를 반환합니다.
상술한 내용에 근거하여 useState의 기법을 확인하세요.
ES6의 분할 대입을 사용하여 각자의 요소를 받아들인다.
첫 번째는 초기 값을 받아들이고, 두 번째는 작업 초기 값을 받아들이는 함수입니다.
useState 기호

//もし、sizeだったらsetSizeと書きます。これは慣習的なものです。
const [count, setCount] = useState(0);

이제 함수 구성 요소에서countstate를 조작할 수 있습니다.
다음은 고정된 계수 구성 요소입니다.setCount 클래스 구성 요소에 익숙한 setState값 상태를 변경하여 어셈블리를 다시 그리도록 지시합니다.
(여기서 클릭 이벤트에서 상태를 바꾸고 다시 묘사)
react 강좌에서 고전 계수 구성 요소를 사용하여 검증

import React, { useState } from 'react';

const App = () => {

    const [count, setCount] = useState(0);

    const increment = () => setCount(count + 1); 
    const decrement = () => setCount(count - 1);

    //setCountの引数には関数も与えることができる
    //setCountの引数には現時点の状態が返ってくる。
    //その値に基づいて、複雑な処理をしたいという要件で使えるテクニック
    const increment2 = () => setCount((previousCount) => previousCount + 1)

    return(
        <>
            <h1>count: { count }</h1>
            <button onClick={ increment }>プラス１</button>
            <button onClick={ increment2 }>プラス１</button>
            <button onClick={ decrement }>マイナス１</button>
        </>
    )
}

export default App;

느끼다

이번에는 정말 기본적인 부분만 해봤어요. useEffect 등도 편해요.
React도 점점 재미있어지고 있습니다.