3. CSS 설정

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>
  );
}

컴포넌트 만들기

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-componentsstyled-components

styled-components

CSS for the <Component> Age

styled-components

styled-componentsstyled-components: Basics

styled-components: Basics

Get Started with styled-components basics.

styled-components

라이브러리 설치

npm install styled components

플러그인 설치

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;