今日やったこと

今日はreact hooksを使って素子を作る方法を学び、自己実習後にwepbackを取り付けました.先週react classで実現した部分をhookで再製作したところ、違いがよく感じられました.次のレッスンに入る前に、countをレッスンに追加するLikeButtonボタンをhooksで作ってみました.直接作成すると、setCount()関数で論理が非同期であると判断できます.webpackは1つだけ取り付けられています.明日から設定部分を勉強します.
情報処理記事のメモの結果はまだ出ていませんが、明日から実録の勉強を始めます.実はちょっと緊迫しています.

はんのうフック

既存のクラスを使用して実装されたLikeButton

class LikeButton extends React.Component {
    constructor(props) {
        super(props);
        // state(상태): 컴포넌트에서 변경될 수 있는 요소들 (ex 클릭 시 글자 변경)
        this.state = {
            liked: false
        }
    }
    // 해당 클래스 인스턴스를 화면에 표시하는 방법
    render() {
        // js 안에서 html문법 사용(=JSX (js + xml))하기 위해 babel 사용
        return <button type="submit" onClick={() => { this.setState({ liked: true }) }}>{this.state.liked === true ? 'Liked' : 'Like'}</button>;
    }
}

代替hooks+setCountの追加

const LikeButton = () => {
    const [liked, setLiked] = React.useState(false);
    const [count, setCount] = React.useState(0);

    const onClick = (e) => {
        setCount((prevCount) => { 
            return prevCount+1;
        });
        setLiked(liked ? false : true);
        console.log(count);
        // 비동기처리라 그런지 위에서 setCount로 count 증가시켜도 console.log엔 prevCount가 출력
        // html 버튼에서 count값 가져올 땐 증가된 값 반영됨
    };

    return (
        <>
            <button onClick={onClick} type="button">{liked ? "Liked":"Like"} - {count}</button>
        </>
    );
}

情報処理技師学習計画

3月

4週間

プログラミング、データベース部分集中学習

パッチショップの日常問題、寄付問題などを解決する

点解答ナノサイト出題

(3.23)メモ結果発表

5週間

残りの部分1/2学習(重要を主とする)

シナゴントモ川の

パッチショップ日常問題

四月

1週間

残りの部分1/2学習(重要を主とする)

シナゴントモ川の

パッチショップ日常問題

2~3週間

メモをとりながら勉強する

視聴説

パッチショップ日常問題

4週間

ビデオ教育速度

わからない部分補足学習

エラーチェック

セキュリティセクション最新技術

について

パッチショップ日常問題

5月

エンド

(5.7)実技試験