리액트 심화반 1주차 - 2

22.04.14(목)
스파르타코딩클럽 리액트 심화반 - 1주차 과정

◎ 프로젝트 생성

• 기본 프로젝트 세팅 : 해당 velog 참고

• 도움되는 크롬 익스텐션

  • Redux devTools: 리덕스를 사용할 때, 리덕스의 액션에 따른 데이터 변화를 편히 볼 수 있게 해줌
  • React developer Tools : 리액트를 디버깅하기 편하게 해줌

• 도움되는 VSCode 확장

  • react extension pack 설치
  • prettier - code formatter

• 기본 화면 세팅시 사용할 라이브러리

  • styled-components
  • [email protected]

◎ 폴더 구조 설명

• build: 빌드 후 결과물이 여기에 생성
• node_modules: 우리가 설치한 패키지들
• public: 가상 돔이 들어갈 빈 껍데기 html(index.html)이 들어있는 폴더
• src: 실제 소스 코드가 들어갈 폴더입니다.
  • /elements: button, input등 최소단위 컴포넌트(공통 스타일도 여기서 맞출거예요.)
  • /components: elements의 컴포넌트를 조합해서 우리가 쪼갠 컴포넌트
  • /pages: components에 있는 컴포넌트를 조합해서 페이지를 꾸밈
  • /redux: 리덕스 모듈과 스토어
  • /shared: 공용으로 사용할 코드
  • App.js, Request.js, Time.js, Cookie.js, firebase.js 등 시작점으로 쓸 파일과 전역으로 쓸 객체는 src에 생성
• 프로젝트 별로 다른 방식으로 나누어 사용해도 무방함

◎ 최소단위 컴포넌트 만들기

• 컴포넌트 쪼개기

  • 기본적으로 컴포넌트를 쪼개는 방식은 사람마다 다름
    • 너무 작게 쪼개면 만들기 힘들고, 너무 크게 쪼개면 재활용이 힘듦
    • props로 받아오는 내용이 너무 많아도 Component로 사용하기가 힘듦
  • 페이지마다 반복되는 부분을 찾아 컴포넌트로 빼면 사용하기 유용함

• 최소단위 컴포넌트 만들기 (폴더 구조에서 최소단위:element, 중간단위:component)

  • 자주 사용하는 요소들(Button, Inputbox, Image, Text) 등을 element로 만듦 (component화 함)
  • 이 '최소단위 컴포넌트' 에서는 상위 component에서 prop로 상황에 따라 바뀔만한 CSS나 data를 props로 넘겨 받아서 적용함
  • 형태를 두가지 분류로 나누어 적용하는 것도 가능 > 예시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;

• 중간 Component 나 Pages 에서 사용 예시

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;