Front-end/React
-
[styled-component] ThemeProvider로 다크모드 구현해보기!Front-end/React 2022. 4. 13. 19:08
안녕하세요! 오늘은 styled-components의 ThemeProvider를 통해 간단하게 다크모드를 구현해보도록 하겠습니다! 중간에 recoil이 잠깐 등장하는데! recoil이 궁금하신 분은! 🧐 https://sangjuntech.tistory.com/27 [상태관리, Recoil] Recoil을 사용해보자! 안녕하세요! 오늘은 상태관리를 위한 패키지 중 하나인 "Recoil"에 대해 알아보도록 하겠습니다! 상태관리를 위한 패키지 중에는 많은 것들이 있는데요. 대표적으로 "Redux"가 있죠! 👏🏻 저는 개 sangjuntech.tistory.com 여기에서 recoil에 대해 알아보면 좋을 것 같습니다 ㅎㅎ 👀 자 그럼 같이 ThemeProvider를 알아볼까요! 우선 ThemeProvider..
-
[React-query] 리액트 쿼리를 사용해보자!Front-end/React 2022. 3. 29. 19:20
React query는 왜 사용하나?! 리액트 쿼리를 사용하기 전에, 왜 이것이 그렇게 유용할까요? 리액트 쿼리의 장점은 다양한데 그 중 몇 가지를 읊어보자면 1. react-query 자체 캐싱 2. fetch 과정 간소화 3. 다양한 hooks 정도가 있을 것 같습니다. 그럼 리액트 쿼리의 사용 방법을 알아봅시다! npm install react-query 우선 당연히 패키지를 다운로드 받아야합니다. 그리고 리액트 앱에 queryclientprovider을 제공해줘야 합니다. Provide queryClient import { QueryClient, QueryClientProvider } from "react-query"; const queryClient = new QueryClient(); Reac..
-
[Typescript,React] Typescript로 Form,UseState 사용해보기Front-end/React 2021. 12. 14. 18:04
안녕하세요! 오늘은 React + Typescript의 환경에서 useState와 form에서의 타입선언 등을 알아보겠습니다! 자바스크립트를 사용하다가 처음으로 타입스크립트로 프로젝트를 진행할 때, 타입스크립트에 익숙하지 않은 사람들이 힘들어하는 부분일 것이라 생각해서 정리해보도록 하겠습니다! #1. Form event with react+typescript 저도 처음 타입스크립트환경에서 리액트로 프로젝트를 할 때 form의 타입을 무엇으로 설정하는지 몰라 한참 찾았던 기억이 있습니다 ㅠㅠ javascript에서는 form의 event의 타입을 지정해주지 않아도 진행이 되지만, 타입스크립트는 event가 어디서 발생하는지에 대한 타입을 지정해달라고 에러를 내뱉습니다. 간단하게 말하면 타입스크립트는 inp..
-
[Styled-component] styled-component 좀 더 똑똑하게 쓰기Front-end/React 2021. 12. 13. 17:22
안녕하세요. 오늘 포스팅할 주제는 'styled-component'입니다! 리액트를 사용하는 분이라면 다양한 css 라이브러리를 사용하실텐데 저는 CSS-IN-JS의 대표적인 라이브러리 중 하나인 styled-component를 사용 중입니다. 하지만 요즘 styled-component의 재사용성을 제대로 사용하지 않는 저를 발견하고 styled-component의 다양한 기능과 재사용성을 더욱 심도있게 사용해보자라는 마음에 포스팅을 하게 되었습니다! 우리 모두 styled-component를 제대로 사용해 보도록 합시다! #1 Styled-component의 props전달을 잘 사용하자. 같은 h2 태그를 가진 element를 사용해야 한다고 가정해보겠습니다. 둘 다 부제목이지만 다른 폰트 사이즈를 사..
-
[React] 리액트 꿀라이브러리 탐방Front-end/React 2021. 12. 8. 16:25
더보기 계속해서 라이브러리가 업데이트 될 예정입니다. 👨🏻💻 1. react-helmet SPA의 가장 큰 단점이 무엇일까요? SEO? 우리는 고정된 타이틀만을 사용할 수 밖에 없습니다. 왜냐하면 우리는 싱글 페이지 내에서 컴포넌트들의 변화만 볼 수 있을 뿐이니까요. 하지만 react-helmet을 사용하면 우리는 페이지마다 타이틀을 변경해 줄 수 있습니다. ✌🏻 npm install react-helmet 사용법은 굉장히 간단합니다. react-helmet을 프로젝트에 import한 후 다음과 같이 헬멧 안에 title 태그와 함께 자신이 적용하고 싶은 타이틀을 적용하면 됩니다.