3. CSS 설정

Jul 14, 2025

Contents

CSS 설정


h1 {
  color: purple;
}


import './App.css';

function App() {
  return (
    <div>
      <div>숫자:{num}</div>
      {post.map((i) => (
      <div>
        <h1>{i.id}</h1>, 
        <h1>{i.title}</h1>,
        <h1>{i.content}</h1>
      </div>
      ))}      
    </div>
  );
}

컴포넌트 만들기

📌

rsf 컴포넌트 자동완성 문법

components/Header


import React from 'react';

function Header(props) {
    return (
        <div>
            <ul>
                <li>홈</li>
                <li>글쓰기</li>
                <li>로그아웃</li>
            </ul>
        </div>
    );
}

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


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


const postList =[
        {id : 1, title:"제목1",content :"내용1"},
        {id : 2, title:"제목2",content :"내용2"},
        {id : 3, title:"제목3",content :"내용3"},
];

let post = postList.map((a)=>({
    ...a,
    content:"내용변경",
}));
console.log (post);


function App() {
  return (
    <div>
      <Header/>
      {post.map((i) => (
      <div>
        <h1>{i.id}</h1>, 
        <h1>{i.title}</h1>,
        <h1>{i.content}</h1>
      </div>
      ))}      
    </div>
  );
}

export default App;

컴포넌트 디자인

📌

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

styled-componentsstyled-components

styled-components

CSS for the <Component> Age

styled-componentsstyled-components: Basics

styled-components: Basics

Get Started with styled-components basics.

라이브러리 설치

📌

라이브러리 설치


npm install styled components

플러그인 설치

📌

styled-componesnts에 자동완성등 사용가능하능한 플러그인

Header.js


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

const MyLi = styled.li`
color: green;
font-size: 30px;
`

function Header(props) {
    return (
        <div>
            <ul>
                <MyLi>홈</MyLi>
                <MyLi>글쓰기</MyLi>
                <MyLi>로그아웃</MyLi>
            </ul>
        </div>
    );
}

export default Header;