SCSS

sassがcssを拡張すると、scssはsassのすべての機能とともに過去のcssの文法をもたらすことができる.npmを使用してインストールします.

yarn add [email protected] open-color sass-loader classnames

scssのいくつかの特徴は:

nesting

div{
	p{
    	color : red;
        font : family : hack;
        size : 20px
    }
}

scssはネストを提供します.関連ノードを直感的にカスケードできます.

親要素にスタイルを適用

div{
	color : blue;
	&:hover {color:red}
    & > p { color : yellow}
}

上記の場合、divフォントの色は青であるが、マウスのサスペンション時は赤であり、divのpは黄色である.

宣言変数

$a : 20px;
p {
	width : #{a};
}

繰り返し値や管理する文字列などを変数として宣言できます.

styled components

styled componentsを使用すると、コンポーネントに直接スタイルを作成できるため、classNameの乱用が直感的に減少します.次のコマンドでインストールします.

yarn add styled-components

適用は簡単です.

import styled from 'styled-components';

function App() {
  return (
    <div className="App">
      <Sc/>
    </div>
  );
}

const Sc = styled.div`
  padding: 20px;
  border-radius: 15px;
  &:hover{
    background-color: yellow;
  }
`;

export default App;

ライフサイクル

構成部品には、作成→変更→削除のライフサイクルがあります.変更は次の場合に発生します.

propsまたはstate変更

親コンポーネントの更新または再レンダリング

強制更新

constructor

コンストラクション関数で構成部品を作成するときに呼び出されます.

componentDidMount

mountは、構成部品が画面に表示されることを示す.componentDidMountは、この構成部品の最初のレンダリングが完了したことを示します.

componentDidUpdate(prevProps, prevState, snapshot)

componentDidMountは最初に実行され、componentDidUpdateはレンダリングが完了するたびに呼び出されます.prevPropsおよびprevStateは、更新前のpropsおよびstateを表す.

componentWillUnmount

componentWillUnmountドームにレンダリングされた要素が除去されたときに呼び出される.通常、構成部品に登録されているイベントを解除する関数として使用されます.

Ref

反応素子に単独でアクセスするために、React.createRef()を使用した.

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: ["안녕", "리액트"],
    };
    this.text = React.createRef();
  }

  componentDidMount(){
    console.log(this.text);
  }
  render() {
    
    return (
      <div className="App">
       	<input type="text" ref={this.text}/>
      </div>
    );
  }
}
export default App;

上記特定要素inputrefにより制御することができる.

emmet

Reactでもemmetを使用します.
vscodeの設定(ショートカットキー:ctrl+,)に入り、Include Languagesを検索します.
をクリックして、add itemItemjavascript Valueを作成し、javascriptreactをクリックします.

jsxでもemmetが使えるようになりました.

上のOKキーを押します.

DOMは自動的に完成し、基本的な文法は以下の通りです.
シンボル構文記述例結果>サブエレメントdiv>pTab+同級エレメントa+p<div><p></p></div>*数増加div*2 <a/><p></p>^親エレメントdiv>h 1^p<div></div><div></div>

vscode-styled-components

styled-conentsはemmetも使用できます.
拡張プラグインで検索してインストールする場合は、emmetおよび<div><h1></h1></div><p></p>+vscode-styled-componentsのアシスタント機能を使用して、backtic内部のscssコードを以下に示すように強調できます.