反応深化班第1週-2

22.04.14(首)
スパルタコードクラブ反応深化クラス-1週間のコース

◇項目の作成

基本項目設定:関連するエンベロープを参照

クロム含有量の向上に寄与

Redux devTools:Reduxを使用する場合、Redux動作によるデータの変化を簡単に確認できる

react developer Tools:簡単な調整反応

Vscodeの拡張を支援

react拡張パッケージのインストール

prettier - code formatter

デフォルトの画面を設定するときに使用するライブラリ

styled-components

[email protected]

◇フォルダ構造の説明

build:構築後生成物をここで生成

node_modules:インストールしたパッケージ

public:仮想ドームの空きケースhtml(index.html)を含むフォルダ

src:実際のソースコードを含むフォルダ.

/element:button、inputなどの最小単位素子(共通スタイルもここで調整).

/components:エレメントのエレメントを組み合わせて、私たちが割ったエレメント

/pages:コンポーネント内のエレメントを組み合わせてページを飾る

/redux:冗長モジュールとショップ

/共有:共通コード

App.js, Request.js, Time.js, Cookie.js, firebase.jsなどの開始点として使用するファイルと、グローバルとして使用するオブジェクトはsrcに作成されます

項目別使用不要

◇最小単位素子の作成

コンポーネントの分割

基本的に人によって素子を分割する方式が異なる

小さすぎて扱いにくい・大きすぎて回収しにくい

アイテムが多すぎてセットにしづらい

各ページの重複部分を検索して部品として除外するのに非常に役立つ

最小単位構成部品の作成(フォルダ構造の最小単位:element、中間単位:component)

共通要素(Button、Inputbox、Image、Text)等を要素(コンポーネント化)として作成

この「最小単位素子」では、親コンポーネントからpropに移行し、状況に応じて変化する可能性のあるCSSまたはデータを受信し、propsに適用する

形態を2種類に分けても良い>例1

Gridを使用して、デフォルトのflex導入を調整することもできます.

例1

// elements > Image.js
import React from "react";
import styled from "styled-components";

const Image = (props) => {
    const {shape, src, size} = props
    const styles = {src, size}

    // props에서 받은 분류를 통해 전혀 다른 값을 return함
    if (shape === "circle") {
        return(
            <ImageCircle {...styles}></ImageCircle>
        )
    }
	
    if (shape === "rectangle"){
        return(
            <AspectOutter>
                <AspectInner {...styles}/>
            </AspectOutter>
        )
    }
    
    return(
        <React.Fragment/>
    ) 

}

// 해당 값이 넘어오지 않았을 때, 기본값을 설정해 놓음
// 오류를 막을 수는 있지만, 데이터가 수정되었는지 여부는 판단하기 힘듦
Image.defaultProps = {
    shape: "circle",
    src: "https://velog.velcdn.com/images%2Fgwichanlee%2Fpost%2Fb467e51c-2503-430d-ab89-0dd806f2a21e%2Ftest1.jpg",
    size: 36,
}

// styled-component 사용시에 "--"를 앞에 붙여 변수처럼 활용할 수 있다.
// styled-component 사용할 때 해당 요소에 넘긴 props를 아래와 같이 활용할 수 있다.
const ImageCircle = styled.div`
    --size: ${(props) => props.size}px;
    width: var(--size);
    height: var(--size);
    border-radius: var(--size);

    background-image: url("${(props) => props.src}");
    background-size: cover;

    margin: 4px;
`;

// div를 2개 사용하는 것을 통해 사진을 4:3 비율로 하는것을 강제함
const AspectOutter = styled.div`
    width: 100%;
    min-width: 250px;
`

const AspectInner = styled.div`
    position: relative;

    padding-top: 75%;
    overflow: hidden;
    background-image: url("${(props) => props.src}");
    background-size: cover;
`

export default Image

例2

import React from "react";
import styled from "styled-components";

const Grid = (props) => {

    // children 값은 설정해주지 않아도 알아서 넘어감 / 안에 있는 하위 요소를 지정
    const {is_flex, width, margin, padding, bg, children} = props
    const styles = {is_flex, width, margin, padding, bg}

    return(
        <React.Fragment>
            <GridBox {...styles}> {children} </GridBox>
        </React.Fragment>
        )
}

Grid.defaultProps = {
    children: null,
    is_flex: false,
    width: "100%",
    padding: false,
    margin: false,
    bg: false,
}

// align-items : center; 상하 정렬 , justify-content : space-between; 좌우 양쪽 정렬
// 3항연산자 사용시, 값이 있다면 (ex>"12px") true 처리함
const GridBox = styled.div`
    width: ${(props) => props.width};
    height: 100%;
    box-sizing: border-box;  // 박스 사이즈 계산시, padding 과 border-width 까지 전부 포함
    ${(props) => props.padding ? `padding : ${props.padding};` :""}
    ${(props) => props.padding ? `margin : ${props.margin};` :""}
    ${(props) => props.padding ? `background-color : ${props.bg};` :""}
    ${(props) => props.is_flex
        ? `display : flex; align-items : center; justify-content : space-between;`
        : ""
    }
`

export default Grid;

中間コンポーネントまたはページ使用例

import React from "react";
import {Grid, Image, Text} from "../elements/index.js"

const Post = (props) => {
    return(
        <React.Fragment>
            <Grid>
                <Grid is_flex> // is_flex 안에 있는 것들에 flex, space-between 적용
                    <Image shape="circle" src={props.src}/> // Image에 circle 분류의 형태로 나옴
                    <Text bold>{props.user_info.user_name}</Text>
                    <Text>{props.insert_dt}</Text>
                </Grid>
                <Grid padding="16px">
                    <Text>{props.contents}</Text>
                </Grid>
                <Grid>
                    <Image shape="rectangle" src={props.src}/> // Image에 rectangle 분류의 형태로 나옴
                </Grid>
                <Grid padding="16px">
                    <Text bold>댓글 {props.comment_cnt}개</Text>
                </Grid>
            </Grid>
        </React.Fragment>
    )
}

// 아직 구현되지 않은 기본값 설정
Post.defaultProps = {
    user_info: {
        user_name: "Steve",
        user_profile: "https://velog.velcdn.com/images%2Fgwichanlee%2Fpost%2Fb467e51c-2503-430d-ab89-0dd806f2a21e%2Ftest1.jpg"

    },
    image_url: "https://velog.velcdn.com/images%2Fgwichanlee%2Fpost%2F5cc3bbe0-550a-4cb7-8804-467f420f6002%2Ftest2.jpg",
    contents: "예시입니다.",
    comment_cnt: "0",
    insert_dt: "2022-04-14 01:00:00",

}

export default Post;