React 리액트 - 폴더 구조, 리액트의 스타일

 

 

리액트 기본 폴더 구조

 

 

[components]
[utils]
 - arrayheler.js
 - parseheler.js
[consts]
 - key.js (상수, 문자열)
[styles] // js의 장점 -> 동적 스타일 변경이 가능 -> 변수 제어 -> 속도가 엄청나게 빠름
 - theme.js
 - globalStyle.js
 - common.js
 ...
[pages]
  [Home]
    [Hooks]
    [Components]
     -home.js
[routes]
[hooks]
... etc

 

 

styled 확장 기능

 

 

styled 확장기능을 사용해 빠르고 쉽게 다양한 스타일 사용 가능

 

 

 

Home

 

 

리액트 프로젝트의 스타일 컴포넌트 구조

 

- pages에 폴더 추가: 하나의 페이지에 하나의 폴더를 만들고 스타일을 추가한다

- home.jsx 폴더 생성해 사용하고 HomeChild 컴포넌트로 기능 구현

- style.js 스타일 컴포넌트에 스타일 구현

 

 

<Home>

import React from 'react';
import styled from 'styled-components';
import S from './style';
import HomeChild from './HomeChild';

const Home = () => {
  return (
    <>
      <S.StyledDiv>
        스타일 컴포넌트: 정말 외워서 쓰는 하드 코딩 스타일🥲 
        레거시 프로젝트에서나 쓰던 스타일로 잘 안 쓴다
      </S.StyledDiv>
      <HomeChild>자식</HomeChild> {/*styled component와 한눈에 구별됨*/}
      <S.StyledButton>버튼을 스타일로 꾸며볼게요</S.StyledButton>
    </>
  );
};

export default Home;

 

 

<styled> 컴포넌트

import styled from "styled-components"

const S = {}

  S.StyledDiv = styled.div`
    width: 100px;
    height: 100px;
    border: solid 1px #333;
    display: flex;
    justify-content: center;
  `

  S.StyledButton = styled.button`
    border: none;
    width: 500px;
    height: 40px;
    color: blueviolet;
    background-color: lightpink;
    cursor: pointer;
  `

  export default S; // S하나만 가져가면 한꺼번에 사용 가능

 

 

스타일 컴포넌트를 생성해 객체로 끌어다 쓰면 문제 해결

-> 스타일 컴포넌트 안에 각각의 스타일을 분리해서 생성

 

- styled component를 객체로 쓰기 위해 const로 생성

- Style은 관용적으로 S로 명명

 

 

<결과화면>

 

 

Box

 

 

styled components로 2행 3열 box 구현하기

 

 

<Box.jsx>

import React from 'react';
import S from './style';

const Box = () => {
  return (
    <div>
      <S.Container>
          <S.Box $color={"red"}>1행1열 RED</S.Box>
          <S.Box $color={"orange"}>1행2열 ORANGE</S.Box>
          <S.Box $color={"blue"}>1행3열 BLUE</S.Box>

          <S.Box $color={"green"}>2행1열 GREEN</S.Box>
          <S.Box $color={"yellow"}>2행2열 YELLOW</S.Box>
          <S.Box $color={"purple"}>2행3열 PURPLE</S.Box>
      </S.Container>
    </div>
    );
};

export default Box;

 

 

- 동적 스타일: 스타일 컴포넌트는 동적 제어가 가능하다

- 예약어와 겹치는 것을 방지하기 위해 $사용

 

 

<style.js>

import { height, width } from "@fortawesome/free-solid-svg-icons/fa0";
import styled from "styled-components";

const S = {}

  S.Container = styled.div`
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 308px;
    border: 1px;
  ` 

  S.Box = styled.div `
    width: 100px;
    height: 100px;
    background-color: ${(props) => props.$color}
  `

export default S;

 

 

- 동적 스타일: 중복적인 코드를 동적으로 제어

-> 하나의 변수를 가지고 여러 가지 스타일을 사용할 수 있다

 

- 백틱: 리액트에서 자바스크립트 문법을 사용하기 위해 사용

 

- &: 자가 선택자: 자기 자신을 선택하는 선택자를 제공하고 있다

    & > div { // 바로 밑의 자식 div
      width: 100px;
      height: 100px;
      background-color: orange;
    }

    & #box {

    }

    & .box {

    }

 

 

<결과화면>