react
-
전역상태관리 Recoil (feat.ContextAPI) 아티클React/Recoil 2023. 5. 2. 21:05
0. 본격적인 Recoil 소개에 앞서 Recoil, ContextAPI 같은 전역상태관리 툴을 왜 사용하는 걸까? 프론트엔드에서 상태(State)란 컴포넌트 내부에서 관리되며 웹앱의 렌더링에 영향을 미치는 객체이다. 처음 리액트 앱을 npm에서 실행하면 couter가 시작되는데 여기서 + 를 누르면 증가하고 -를 누르면 감소하는 그 "숫자" 가 바로 상태의 형태로 관리된다는 말이다. 상태의 종류에는 총 3가지로 나눌 수 있는데 지역상태 : 하나의 컴포넌트 내부에서만 관리되는 상태로 , 해당 상태를 다른 컴포넌트들과 공유하지 않는다. 컴포넌트 간 상태 : 하나의 상태를 여러가지 컴포넌트에서 사용되고 변경되며 관리되는 모습을 보여준다. 이러한 상호작용을 위해 바로 "Prop Drilling" 의 방식을 사..
-
useState 바로 뒤에 console.log 를 했더니 이전 값이 나온다.(혹은 비어있다)React/React 2023. 3. 7. 17:12
📌 useState 바로 뒤에 console.log 를 했더니 이전 값이 나온다.(혹은 비어있다) 라는 문제가 생겼다. 코드를 먼저보자 import { useEffect, useState } from "react"; function Todolist() { const [todo, setTodo] = useState(""); const todoHandler = (e: React.FormEvent) => { e.preventDefault(); const todoData = new FormData(e.currentTarget); const newTodo = todoData.get("todo") as string; setTodo(newTodo); console.log(todo) //비어있는 값이 출력된다. e.c..
-
Recoil 로 Global state management 글로벌 상태관리를 해보자!React/Recoil 2023. 3. 6. 18:44
🌈 다크모드와 라이트모드 전환을 위한 state 설정을 위해 recoil을 이용해보자 📌 recoil 설치방법 npm install recoil 📌 atoms.ts import { atom } from "recoil"; export const isDarkAtom = atom({ key: "isDark", default: false, }); 📌 App.tsx useRecoilValue(isDarkAtom) 을 통해 초기값인 false 를 가져올 수 있다. import { isDarkAtom } from "./recoil/atoms"; import {useRecoilValue} from "recoil" ...(중략) function App() { const isDark = useRecoilValue(isDa..
-
React Query 리액트 쿼리 사용법 사용하는 이유React/React Query 2023. 2. 28. 19:46
📌 기존의 코드는 다음과 같다. loading 이라는 값을 통해 데이터가 다 불러와졌는지를 판별한다. 그리고 데이터가 다 불러와졌다면 loading 을 false 값으로 전환하고 데이터를 setCoins 를 통해 coins 에 데이터를 담는다. 이러한 과정은 두개의 useState를 사용하게 만드는 단점이 존재한다. const [coins, setCoins] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { axios .get("https://api.coinpaprika.com/v1/tickers") .then((Response) => { setCoins(Response.data.slice(0, 99)); set..
-
리액트 타입스크립트 스타일컴포넌트 Theme 적용하기React/React+TypeScript 2023. 2. 22. 03:06
1. styled.d.ts 파일을 만든다. 속에 interface 를 만든다. import "styled-components"; declare module "styled-components" { export interface UsingTheme { textColor: string; bgColor: string; btnColor: string; } } 2. 해당 interface 를 적용할 theme.ts 를 만든다. (단 여기서 UsingTheme 부분이 defaultTheme 로 쓰이면 안된다. 해당 단어는 기본설정이라 변경하면 다 적용되어버린다.) import { UsingTheme } from "styled-components"; export const lightTheme: UsingTheme = ..
-
React + TypeScript 에서 props 전달하는 법 with styled-componentsReact/React+TypeScript 2023. 2. 21. 19:51
📌 TypeScript 타입스크립트 기반 React 에서 props 를 전달하려면 어떻게 해야할까? // interface 를 통해 전달하려고 하는 props 들의 타입을 지정해준다. interface personobj { name : string, age : number } // 전달하려는 props 뒤에 interface 를 지정해준다. const SayHello = ({name, age} : personobj) =>{ return( sayHello {name} you are {age} ) } function App() { return } 📌 그렇다면 Styled-components 스타일 컴포넌트에 props 를 전달하려면 어떻게 해야할까? interface BoxProps { bgcolor : s..
-
Styled-Components 의 애니메이션 과 Pseudo Selector 를 배워보자!React/Styled-Components 2023. 2. 20. 21:34
📌 css 에서 keyframe 을 사용한 animation 은 styled-components에서 어떻게 구현할까? ...(중략) const animation1 = keyframes` from { transform:rotate(0deg); border-radius: 0px; } to { transform:rotate(360deg); border-radius: 100px; } `; ...(중략) const AnimationBox1 = styled.div` height: 200px; width: 200px; background-color: black; animation: ${animation1} 10s linear infinite; `; ...(중략) 📌 styled-components 안에서 pseudo..
-
Styled-Components 리액트 스타일 컴포넌트 props 와 extendingReact/Styled-Components 2023. 2. 20. 17:50
📌 스타일 컴포넌트에서 반복되는 코드를 줄일 수는 없는걸까? const BoxOne = styled.div` background-color: red; width: 100px; height: 100px; `; const BoxTwo = styled.div` background-color: blue; width: 100px; height: 100px; `; 📌 해결방안 : props 로 변수를 지정해주며 styled( ) 로 확장할 수 있다. ...(중략) const Box = styled.div` display: flex; align-items: center; background-color: ${(props) => props.bgcolor}; width: 100px; height: 100px; `; con..