2022.1.25 TIL

0. Styled Component
1. React Query
2. React Helmet

Styled Component

styled-comoponent 란?

Javascript 파일내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS라이브러리로 React프레임워크를 주요 대상으로 한 라이브러리이다.

styled-component 는 css의 클래스 네임 중복 사용 시 생기는 버그 방지와 구조적으로 컴포넌트와 스타일이 묶여있어 관리에 용이하다.

styled-component 사용

import React from "react";
import styled from "styled-component";

const Container = styled.div`
    color: white;
    background-color: grey;
    p{
    	font-size: 24px;
    }
    &:hover{
    	color: blue;
    }
`;

function App() {
	return (
    	<Container>
        	<p>Hello</p>
        </Container>
    )
}

export default App

기본적으로 위 코드와 같이 사용되며, styled-component는 props를 활용할 수 있다.

styled-component의 props 사용

import React from "react";
import styled from "styled-component";

const Container = styled.div`
    color: ${(props) => props.color || "white"};
    background-color: grey;
    p{
    	font-size: 24px;
    }
    &:hover{
    	color: blue;
    }
`;

function App() {
	return (
    	<Container>
        	<p>Hello</p>
        </Container>
    )
}

export default App

color에 대한 props가 존재할 시 해당 색상을 출력하고 없을 시 흰색으로 출력할 수 있다.

React Query

react-query 란?

서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용되는 라이브러리이다.

react-query 는 아래와 같은 장점이 있다.

✅ 간결한 fetch 로직

기존의 데이터 fetch에는 로딩 상태 관리, 페칭한 데이터 관리 등을 위해 여러 훅을 사용했으나, react-query를 사용하면 간결하게 fetch 로직을 작성할 수 있다.

✅ fetcher 함수를 따로 분리하여 컴포넌트로 만들 수 있다.

✅ casing(데이터를 캐시에 저장) 을 하기 때문에, 데이터 손실을 방지할 수 있다.

React Helmet

웹 문서의 헤더 값을 변경할 때 사용하는 리액트 컴포넌트이다. React를 사용할 때에는 컴포넌트에 head 태그를 직접 지정하는게 어려우나 react-helmet을 사용하면 변경이 쉽다.

react-helmet 사용

import React from "react";
import { Helmet } from "react-helmet";

function App (){
	return(
    	<div>
        	<Helmet>
            	<title>사이트 제목</title>
            </Helmet>
        </div>
    )
}
export default App

위와 같이 코드를 적용하면 웹 문서의 title이 변경되어 출력되는 것을 확인할 수 있다.