[TIL] 유데미X사람인 취업 부트캠프 1기 33일차 / 다양한 스타일링, useEffect, netflex
[1. 오늘 배운 것]
1. styled
- React 애플리케이션에서 컴포넌트와 스타일을 함께 정의하고 사용할 수 있게 해주는 라이브러리
- Styled Components를 사용하면 CSS 스타일을 작성할 때 일반적인 CSS 클래스 이름을 사용하는 대신에 React 컴포넌트를 확장하여 스타일을 지정할 수 있음
- 1 : styled 객체를 사용하여 스타일이 적용된 컴포넌트를 생성
- 2 : 템플릿 리터럴 문법을 사용하여 CSS를 작성하고, 필요한 경우에는 동적으로 속성을 전달
- 3 : 생성된 스타일이 적용된 컴포넌트를 JSX에서 사용
import React from "react";
import styled from "styled-components";
const fruits = [
{name: "사과",themeColor: "red"},
{name: "바나나",themeColor: "yellow"},
{name: "딸기",themeColor: "pink"},
{name: "수박",themeColor: "green"},
];
function Fruits() {
return (
<div>
{fruits.map((fruit) => {
return (
<Fruit key={fruit.name} themeColor={fruit.themeColor}>
{fruit.name}
</Fruit>
);
})}
</div>
)
}
const Fruit = styled.li`
background-color: ${(props) => props.themeColor};
`;import React from "react";
import styled from "styled-components";
import Header from "../Header";
import Sidebar from "../Sidebar/Sidebar";
function Layout({ children }) {
return (
<Wrapper>
<Header />
<Sidebar />
<main className="px-14 py-20">{children}</main>
</Wrapper>
);
}
const Wrapper = styled.div`
display: grid;
grid-template-columns: 200px 1fr;
`;
export default Layout;
2. scss
- Sass는 CSS의 확장된 기능을 제공하여 CSS 코드를 더 쉽게 작성하고 유지보수할 수 있게 함
- 변수 : 값을 저장하고 재사용할 수 있는 변수를 정의할 수 있음
- 중첩 : 부모 요소의 선택자를 중첩해 코드를 더 구조적으로 작성 가능
- 상속 : 스타일 규칙을 다른 규칙으로 확장하여 코드를 재사용할 수 있음
import React from "react";
import styles from "./Header.module.scss";
function Header() {
return (
<header className={styles.header}>
<div className={styles.logo}>
<a href="/">산뜻한 화요일</a>
</div>
<nav>
<ul>
<li>
<a href="/menu-1">메뉴 1</a>
</li>
<li>
<a href="/menu-1">메뉴 2</a>
</li>
</ul>
</nav>
</header>
);
}
export default Header;.header {
background-color: yellowgreen;
height: 80px;
padding: 0 3rem;
display: flex;
align-items: center;
column-gap: 5rem;
grid-column: span 2;
.logo {
> a {
font-size: 24px;
font-weight: 700;
color: black;
text-decoration: none;
}
}
nav {
> ul {
display: flex;
list-style: none;
padding-left: 0;
column-gap: 2rem;
> li {
> a {
font-size: 15px;
font-weight: 500;
color: black;
text-decoration: none;
&:hover {
color: blue;
}
}
}
}
}
}
3. tailwind
- 클래스 기반 스타일링 : Tailwind CSS는 클래스를 사용하여 스타일을 적용합니다. 각 클래스는 특정한 스타일을 정의하며, 클래스들을 조합하여 원하는 디자인을 구성
- 매우 유연한 디자인 시스템: Tailwind CSS는 많은 사전 정의된 클래스를 제공하며, 이를 조합하여 다양한 디자인을 쉽게 만들 수 있습니다. 또한 필요한 경우 사용자 정의 클래스를 추가하여 디자인 시스템을 확장
import React from "react";
import styled from "styled-components";
import Header from "../Header";
import Sidebar from "../Sidebar/Sidebar";
function Layout({ children }) {
return (
<Wrapper>
<Header />
<Sidebar />
<main className="px-14 py-20">{children}</main>
</Wrapper>
);
}
const Wrapper = styled.div`
display: grid;
grid-template-columns: 200px 1fr;
`;
export default Layout;
4. useEffect
- React 함수형 컴포넌트에서 부수 효과(side effects)를 수행하기 위해 사용되는 Hook
- side effect: 데이터 가져오기, 구독 설정하기, 수동으로 DOM 수정하기 등이 부수 효과에 해당
- 상태변수 선언 후 : const [data, setData] = useState(null);
useEffect(() => { return() => {} }, []);import React, { useEffect, useState } from "react";
function Counter() {
const [value, setValue] = useState(0);
const handleClickMinus = () => {
setValue((prevValue) => prevValue - 1);
};
const handleClickPlus = () => {
setValue((prevValue) => prevValue + 1);
};
useEffect(() => {
if (value % 5 === 0 && value !== 0) {
alert("5의 배수");
}
}, [value]);
return (
<div>
<div className="display">{value}</div>
<div>
<button onClick={handleClickMinus}>-</button>
<button onClick={handleClickPlus}>+</button>
</div>
</div>
);
}
export default Counter;import React, { useEffect, useState } from "react";
const getPostsEndpoint = "https://jsonplaceholder.typicode.com/posts";
function Posts() {
const [count, setCount] = useState(0);
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch(getPostsEndpoint, { method: "GET" })
.then((response) => response.json())
.then((data) => setPosts(data));
}, []);
return (
<div>
<h2>게시글 목록</h2>
<ol>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ol>
</div>
);
}
export default Posts;import React, { useEffect, useState } from "react";
function Timer() {
const [passedTime, setPassedTime] = useState(0);
useEffect(() => {
const timerId = setInterval(() => {
setPassedTime((prevPassedTime) => prevPassedTime + 1);
}, 1000);
return () => {
clearInterval(timerId);
};
}, []);
return (
<div>
<h1>타이머</h1>
<div style={{ display: "flex", flexWrap: "wrap", columnGap: 4 }}>
{Array(passedTime)
.fill(0)
.map((_, index) => (
<div key={index}>{index}</div>
))}
</div>
</div>
);
}
export default Timer;
[2. 회고]
useEffect(() => {}, []) 잊지말자...........