ABOUT ME

Today
Yesterday
Total
  • [react] styled-components
    react+vue 2022. 9. 23. 14:36

    기존 스타일 적용 방법

    function App() {
      const a = {
        backgroundColor: "red"
      };
      return (
        <div style={ a}>안녕</div>
      );
    }
    

    • 단점 : 자동완성이 안된다.
    • 주의 사항: style을 만들때는 함수안에 만들지 말것. 정적 코드이기 때문에 UI가 reload될 때마다 읽어지는 것을 방지한다.

     

    css파일 만들기

    src폴더 우클릭→새파일→<파일이름>.css

    • App.css
    .box-style{
    
        background-color: pink;
    }
    
    • App.js
    import './App.css';
    
    function App() {
      const a = {
        backgroundColor: "red"
      };
      return (
        <div>
          <div style={a}>안녕</div>
          <div className = "box-style">css파일로 적용</div>
        </div>
      );
    }
    
    export default App;
    

    styled-components

    • 다운로드
    npm install --save styled-components
    

    package.json의 dependencies에 추가되었다.

    확장프로그램에서 vscode-styled-components를 설치해준다(자동완성 기능)

    const Title = styled.h1`
      font-size: 1.5em;
      text-align: center;
      color: palevioletred;
    `;
    

    styled-components 홈페이지에 있는 예제

    자바스크립트로 다시 쓰면

    const t = document.createElement("h1");
    t.style = {
    	fontSize: "1.5em",
      textAlign: "center",
      color: "palevioletred"
    };
    

    styled-components를 사용하는 것이 훨씬 편하다 자동완성도 되고, 문자열 형식을 지키지 않아도 된다.

    import './App.css';
    import styled from 'styled-components';
    
    const Title = styled.h1`
      font-size: 1.5em;
      text-align: center;
      color: palevioletred;
    `;
    
    function App() {
      const a = {
        backgroundColor: "red"
      };
      return (
        <div>
          <div style={a}>안녕</div>
          <div className="box-style">css파일로 적용</div>
          <Title>styled-components 적용</Title>
        </div>
      );
    }
    
    export default App;
    

    적용할때는 <Title>내용</Title>으로 적용한다.

    장점은 css파일 없이 하나의 javascript파일로 관리할 수 있고 자동완성을 지원한다. 추가로 css문법과 유사하다.

    단점은 css파일을 재사용할 수 없다.

     

     

    styled-components로 header파일 만들기

    src폴더에 header.js라는 파일을 만들어준다.

    • header.js
    import styled from 'styled-components';
    
    const HeaderStyle= styled.div`
        background-color: blue;
        font-size: 2rem;
        margin: 0 auto;
    `;
    
    
    function Header() { 
    
        return (
            <HeaderStyle>헤더입니다.</HeaderStyle>
        );
    }
    export default Header;

    default로 Header함수를 export시켜준다.

    • App.js
    import './App.css';
    import styled from 'styled-components';
    import Header from './header';
    
    const Title = styled.h1`
      font-size: 1.5em;
      text-align: center;
      color: palevioletred;
    `;
    
    function App() {
      const a = {
        backgroundColor: "red"
      };
      return (
        <div>
          <Header/>
          <div style={a}>안녕</div>
          <div className="box-style">css파일로 적용</div>
          <Title>styled-components 적용</Title>
        </div>
      );
    }
    
    export default App;
    

    header.js의 Header를 import한다.

    App()에 <Header/>를 반환시킨다.

    상단에 헤더가 노출된다.

    댓글

Designed by Tistory.