React 리액트 - 리액트 style 활용 방법 common.js

 

 

Style 컴포넌트 기본 구조

 

 

<Styled01.jsx>

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

const Styled01 = () => {
  return (
    <div>
      <form className='wrapper'>
        <div className='input-wrap'>
          <span>EMAIL</span>
          <input type="text" />
        </div>
        <div className='input-wrap'>
          <span>PW</span>
          <input type="password" />
        </div>
        <button>SUBMIT</button>
      </form>
    </div>
  );
};

export default Styled01;

 

 

- 이메일, 패스워드 입력창을 꾸미기 위해 form과 div 사용

-> 스타일 적용을 위해 className 부여

 

 

<결과화면>

 

 

<style.js>

import styled from "styled-components";

const S = {}

  S.Wrapper = styled.form`
    display: flex;
    flex-direction: column;
    width: 500px;
  `

  S.InputWrap = styled.div`
    display: flex;
    flex-direction: column;
  `

export default S;

 

 

스타일 컴포넌트는 관용적으로 S로 명명

: styled 내부에서 스타일 컴포넌트를 정의하는 폴더
- style.js에서 해당 폴더에서 사용할 모든 스타일을 정의해서 활용

 

 

<Styled01.jsx>

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

const Styled01 = () => {
  return (
    <div>
      <S.Wrapper>
        <S.InputWrap>
          <span>EMAIL</span>
          <input type="text" />
        </S.InputWrap>
        <S.InputWrap>
          <span>PW</span>
          <input type="password" />
        </S.InputWrap>
        <button>SUBMIT</button>
      </S.Wrapper>
    </div>
  );
};

export default Styled01;

 

 

-> form과 div를 스타일 컴포넌트로 대체해 불러옴

 

 

<결과화면>

 

 

- 블록요소에 flex를 적용해서 크기가 커짐

-> style.js에서 언제든 스타일 변경 가능

 

 

styles > common.js

 

 

style 중 공통적으로 자주 쓰이는 속성들을 styles > common.js에 통합해 정의 display: flex; flex-direction: column; 가운데정렬 등

 

 

 

 

<styles > common.js>

import { css } from "styled-components"
// styled 내부에 있는 css를 가져와 사용

export const flexColumn = css`
  display: flex;
  flex-direction: column;
`

export const flexRow = css`
  display: flex;
  flex-direction: row;
`

export const flexCenterColumn = css`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`

export const flexCenterRow = css`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
`

export const flexCenter = css`
  display: flex;
  justify-content: center;
  align-items: center;
`

 

 

- common.js: 공통 속성을 정의하는 파일

-> 공통적으로 자주 사용하는 속성들을 미리 정의해두고 사용

 

 

<style.js>

  S.Wrapper = styled.form`
    ${flexColumn}
    width: 200px;
  `

  S.InputWrap = styled.div`
    ${flexColumn}
  `

 

 

- 백틱 안에서 js를 사용하기 위해 ${} 템플릿 리터럴을 사용

-> 미리 만들어 둔 flexColumn을 가져와 적용해도 동일한 결과가 된다

 

 

외부 소스 사용 public

 

 

 

 

public폴더에 assets로 폴더를 구분하고

fonts, images, logos등 사용할 소스를 구분해 폴더링한다

 

- cat.jpg 파일을 해당 폴더에 넣어둔다

 

 

<Styled02>

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

const Styled02 = () => {
  return (
    <S.ImageWrapper>
      <S.Img 
        src={`${process.env.PUBLIC_URL}/assets/images/styled/cat.jpg`} 
        alt="캣닢에 취한 고양이" />
    </S.ImageWrapper>
  );
};

export default Styled02;

 

 

- 리터럴로 ${process.env.PUBLIC_URL}을 사용해

public > assets > images 폴더에 넣어 둔 cat.jpg 파일을 불러온다

 

 

<style.js>

  S.CatImg = styled.img`
    width: 200px;
  `

  S.CatWrapper = styled.div`
    width: 400px;
    height: 400px;
    border: solid 1px purple;
    ${flexCenter}
  `

 

 

- 기존에 만들어 둔 common.js의 스타일을 불러와 적용하고

추가적인 요소들을 부여

 

 

<결과화면>

 

 

연습문제

 

 

아이콘 또는 이미지 4장을 가져와서 레이아웃 완성시키기

 

 

<Styled03.jsx>

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

const Styled03 = () => {
  return (
    <S.SnowWrapper>
      <S.SnowImgWrapper>
        <S.SnowImg
        width={"100px"}
        src={`${process.env.PUBLIC_URL}/assets/images/styled/01.jpg`} 
        alt="snowflake01" />
        <S.SnowImg
        width={"200px"}
        src={`${process.env.PUBLIC_URL}/assets/images/styled/03.jpg`} 
        alt="snowflake03" />
        <S.SnowImg
        width={"300px"}
        src={`${process.env.PUBLIC_URL}/assets/images/styled/02.jpg`} 
        alt="snowflake02" />
        <S.SnowBg
        width={"300px"}
        height={"300px"}
        alt="snowbg" />
      </S.SnowImgWrapper>
    </S.SnowWrapper>
  );
};

export default Styled03;

 

 

- 가장 마지막 이미지는 bg 스타일로 적용해보기

 

 

<style.js>

import styled from "styled-components";

const S = {}

  // SnowFlake

  // 이미지 스타일
  S.SnowImg = styled.img`
    width: ${(width) => width}; // props의 width를 width로만 사용 가능
    object-fit: cover;
    border-radius: 8px;
    padding: 20px;
  `;

  // 박스 스타일
  S.SnowImgWrapper = styled.div`
    border: 1px pink;
    ${flexCenterColumn}
  `

  S.SnowWrapper = styled.div`
    width: 800px;
    height: 800px;
    border: solid 1px purple;
    ${flexCenter}
  `;

  S.SnowBg = styled.div`
    width: ${({width}) => width};
    height: ${(height) => height};
    background-image: url("/assets/images/styled/04.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  `

export default S;

 

 

<결과화면>

 

 

 

https://developernew.tistory.com/443

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

https://developernew.tistory.com/446

React 리액트 - 리액트 style 활용 방법 global.js