[React] css 설정하기

류재성

Jul 04, 2024

Contents

1. css 설정하기 2. 컴포넌트 만들기 3. 컴포넌트 디자인

1. css 설정하기

💡

css 파일은 대문자로 시작해야 된다.


import './App.css';

let num = 10;
let list = [1,2,3,4];

function App() {
  return <div>
    </div>

}

export default App;

App.css


/*  css 는 그 파일에서만 쓰는게 좋다 */
h1{
  color: red;
}

div{
  border: 1px solid black;
}


import './App.css';
//  css 파일은 대문자로 시작해야 됨.

function App() {
  return <div>
    <h1>안녕</h1>
    <div className="box">박스</div>

    </div>

}

export default App;

2. 컴포넌트 만들기

💡

rsf 를 누르면 자동완성이 된다.

components/Header


import React from 'react';

// 함수가 리턴하는게 디자인
function header() {
    return (
        <div>
        <ul>
          <li>홈</li>
          <li>글쓰기</li>
          <li>로그아웃</li>
        </ul>
      </div>
  
      );
}

// export 를 쓰면 다른 곳에서 사용할 수 있음.
export default header;


import './App.css';
import Header from './components/Header';


function App() {
  return (
  <div>
    <Header />
    <h1>안녕</h1>
    <div className="box">박스</div>
  </div>
)}

export default App;

컴포넌트를 만들고 임포트해서 사용할 수 있다.

3. 컴포넌트 디자인

💡

styled-components는 CSS를 자바스크립트 파일 내부에 작성할 수 있어, 스타일과 로직을 동일한 파일에서 관리할 수 있다.

styled-components

CSS for the <Component> Age

https://styled-components.com/

styled-components: Basics

Get Started with styled-components basics.

https://styled-components.com/docs/basics#installation

styled-components 라이브러리를 설치한다.

💡

styled-components 를 사용할 때 자동완성 등 편리하게 사용하기 위한 플러그인

플러그인 설치

Header.js


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

const MyLi = styled.li`
color: green;
font-size: 30px;
`;
function Header() {
    return (
        <div>
        <ul>
          <MyLi>홈</MyLi>
          <MyLi>글쓰기</MyLi>
          <MyLi>로그아웃</MyLi>
        </ul>

        </div>
    );
}

export default Header;

Contents

1. css 설정하기 2. 컴포넌트 만들기 3. 컴포넌트 디자인

import React from 'react'; // 함수가 리턴하는게 디자인 function header() { return ( <div> <ul> <li>홈</li> <li>글쓰기</li> <li>로그아웃</li> </ul> </div> ); } // export 를 쓰면 다른 곳에서 사용할 수 있음. export default header;

import './App.css'; import Header from './components/Header'; function App() { return ( <div> <Header /> <h1>안녕</h1> <div className="box">박스</div> </div> )} export default App;

import React from 'react'; import styled from 'styled-components'; const MyLi = styled.li` color: green; font-size: 30px; `; function Header() { return ( <div> <ul> <MyLi>홈</MyLi> <MyLi>글쓰기</MyLi> <MyLi>로그아웃</MyLi> </ul> </div> ); } export default Header;