useState 컴포넌트에서 동적인 값을 상태(state)라고 합니다. useState를 사용해서 컴포넌트 내부에서 상태관리를 할 수 있습니다. 배열 비구조화 할당문법을 사용한 형태입니다. 첫번째 원소는 현재상태, 두번째 원소는 setter 입니다. setter를 사용하면 데이터도 변경할 수있고, 컴포넌트도 리렌더링 할 수있습니다. const [number, setNumber] = useState(0) setState()에 callback 함수 setState에 콜백함수를 넣으면 콜백함수의 인자값으로 이전state값을 가져올 수 있다. return을 하면 새로운 state를 지정할 수 있다. setState((prev) => { return !prev }) useState 초기값으로 callback 함수..

리액트 배경 자바스크립트로 UI를 제어하는 경우 간단하게 counter를 만든다고 가정했을 때 제어 원하는 dom select -> 이벤트 핸들러 -> dom 업데이트 라는 과정을 거칩니다. 규모가 커지는경우 많은 DOM을 직접 건드리면서 작업을하면 코드가 난잡해집니다. 리액트는 상태가 변경되었을 때 기존 dom을 날리고 새로운 dom을 보여준다는 개념에서 시작되었습니다. 매번 상태가 변경될 때마다 새롭게 만들게 되면 속도가 엄청나게 느려집니다. 리액트는 상태가 변경되면 Virtual DOM을 사용해서 업데이트가 필요한 곳의 UI를 렌더링 합니다. 그리고 실제 DOM과 비교하여 다른부분에 대해서만 실제 DOM에 패치시켜줍니다. Virtual DOM 개념 메모리 상에 가상으로 존재하는 dom 왜 필요할까 ..

애니메이션 라이브러리 Framer Motion demo api 설치 npm i framer-motion div에 animation을 적용하고 싶을 때 motion에 있는 html태그를 사용해줘야한다. import { motion } from "framer-motion"; export default function App() { return ( ); } styled-components에서 motion을 사용해야하는 경우 // 타입선언은 괄호 뒤에 한다. const Box = styled(motion.div)` .... `; background-color를 변경해야하는 경우 red, blue가 아닌 rgba 컬러를 사용해야한다. 기본 props initial - 애니메이션 적용하기 전 초기스타일 animat..

Routing 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것 React Router 링크를 눌러서 다른페이지로 이동하게 될 때 서버에 다른페이지의 Html을 새로 요청하는 것이 아니라 브라우저의 History API를 사용하여 브라우저의 주소창의 값만 변경하고 기존페이지에 웹 애플리케이션을 유지하면서 라우팅 설정에 따라 또 다른 페이지를 보여준다. 설치 npm i react-router-dom BrowserRouter BrowserRouter컴포넌트로 최상위 컴포넌트를 감싸준다. //src/index.js import App from "./App"; import { BrowserRouter } from "react-router-dom"; import React from "react"; imp..

react state management를 위한 라이브러리 state management 라이브러리가 필요한 이유 - 하위 컴포넌트가 state를 받기위해 여러 하위 컴포넌트를 거쳐가야하는 번거로움을 줄이기 위해 Atom recoil에서 redux store 역활을 하는 값을 저장하고 있는 장소 Atom값을 관찰하면 수정되는경우 리렌더링 된다. 설치 npm install recoil 최상위 컴포넌트(index.tsx)에서 RecoilRoot로 감싸준다. // index.tsx import App from "./App"; import React from "react"; import ReactDOM from "react-dom/client"; import { RecoilRoot } from "recoil";..

인풋을 제어하려면 인풋마다 setState, onChange 값이 각각 필요한데 이런 번거로운 작업들을 해결해주는 라이브러리! 간단한 코드로 인풋에 에러, validate, 이벤트 제어할 수 있다. 설치 npm install react-hook-form register 인풋 name, onchange, onblur 함수를 가지고 있는 객체 사용 시 spread 문법을 이용해 register객체에 있는 값을 넘겨준다. import React, { useState } from "react"; import { useForm } from "react-hook-form"; const TodoList = () => { const { register } = useForm(); return ( add ); }; exp..

react head에 들어가는 요소를 변경하기 위한 패키지 예를 들어 title을 변경하거나, favicon을 수정하는 경우 사용된다. react-helmet을 사용해도 seo를 충족시킬 수 없으므로 seo가 중요한 사이트인경우 SSR을 사용해야한다. 설치 npm i react-helmet 적용 import { Helmet } from "react-helmet"; const coin = () => { return ( 페이지 타이틀 ) }

컴포넌트 별로 스타일을 적용할 수 있지만 reset과 같은 공통 css는 전역으로 선언을 해야한다. npm으로 설치해서 사용하는 방법(https://github.com/zacanger/styled-reset)과 직접 스타일을 만들어서 import하는 방법이 있다. 아래는 직접 스타일 파일을 만들어서 import하는 방법이다. styled-components 에서는 createGlobalStyle을 제공해 전역으로 스타일링 할 수 있게 도와준다. reset.css - https://github.com/zacanger/styled-reset/blob/master/src/index.ts 1. GlobalStyle 파일을 만들고 reset css를 선언한다. // GlobalStyle.tsx import { c..

1. 패키지 설치 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 2. 경로에 있는 js파일 ts, tsx로 확장자 변경해준다. 3. "npx tsc --init" 명령어로 tsconfig.json 파일 생성한 후, tsconfig.json 파일에 "jsx": "react-jsx"추가 4. src/index.tsx에서 수정 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); 5. 타입이 없다고 나오는 패키지들 타입 추가하기 (패키지를 다운받고 타입이 없는경우는 definitelyTyped 페이지에 왠만한건 다 ..

1. styled.d.ts 파일을 만들어서 theme에 들어가는 속성 타입 정의 // src/styled.d.ts import 'styled-components'; declare module 'styled-components' { export interface DefaultTheme { textColor: string; bgColor: string; } } 2. theme.ts 파일 만들고 테마 값 선언 // src/theme.ts import { DefaultTheme } from "styled-components"; export const lightTheme:DefaultTheme = { textColor: '#000', bgColor: '#fff' } export const darkTheme:Def..