開発ログ2週目(反応)

1878 ワード

1.画面をきれいに撮ろう!styled-components

명령어:yarn add styled-components```
import React from 'react';
// 패키지에서 styled를 불러올게요!
import styled from 'styled-components';

function App() {
  return (
    <div className="App">
      {/* props로 bgColor를 줘볼까요! */}
      <MyStyled bgColor를={"red"}>hello React!</MyStyled>
    </div>
  );
}

// scss처럼 자기 자신을 지칭할 때 &를 쓸 수 있습니다!
// props 주는 방법! 이제 알고 있죠?
const MyStyled = styled.div`
  width: 50vw;
  min-height: 150px;
  padding: 10px;
  border-radius: 15px;
  color: #fff;
  &:hover{
    background-color: #ddd;
  }
  background-color: ${(props) => (props.bgColor를 ? "red" : "purple")};
`;
export default App;

2.ライフサイクル


  • 要素が作成され、→修正(更新)、および→消去される.
  • を作成するのは、構成部品をロードするのが初めてです.
  • 修正(更新)
  • は、ユーザーの動作(クリック、データの入力など)によってデータが変更されるか、親コンポーネントのレンダリング時にデータが更新されます.次の場合!
  • 道具変換時
  • 状態遷移時
  • 親構成部品の更新時(=再レンダリング時)
  • または、強制的に更新された場合!(forceUpdate()で構成部品を強制的に更新できます.)
  • 削除とは、ページを移動するか、ユーザの動作(削除ボタンをクリックするなど)によって素子を画面から消去するステップである.