YG - 96년생 , 강아지 있음, 개발자 희망

설치법 npm install react-hook-form React Hook Form 을 쓰는 것이 좋은 이유 function ToDolist() { const [toDo, setToDo] = useState(""); const onChange = (event: React.FormEvent) => { //console.log(event.currentTarget.value); const { value } = event.currentTarget; setToDo(value); }; const onSubmit = (event: React.FormEvent) => { event.preventDefault(); console.log(toDo); setToDo(""); }; return ( Add ); } 이렇게 기..

Recoil 설치법 npm install recoil yarn add recoil https://recoiljs.org/ko/docs/introduction/getting-started Recoil 시작하기 | Recoil React 애플리케이션 생성하기 recoiljs.org Recoil이 필요한 이유 App 만든 state를 여러 provider에서 사용하려 할 때 계속해서 아래로 전달 전달하는 식으로 사용해야하기에 매우 불편하다 만약 dark,light 모드나 로그인하였을 때 다르게 변하는 state들을 사용하려고 할 때 작업환경이 매우 복잡해질 것이다. 그래서 Recoil 에서는 Atom 이라는 globlaState를 제공하여 원하는 provider에서 바로 불러와서 사용이 가능한 유용한 Reac..

TypeScript 의 사용 예시 Javascript의 사용 TypeScript의 사용 보다시피 TypeScript에서는 a : number , b:number을 사용하도록 하여 애초에 실행되지 않고 오류를 알려주는 약간의 보호장치 역할을 한다. 반면에 javascript에서는 지정된 type이 없다보니 실행할 수 있다면 개발자의 의도와 상관없이 실행된다. 리액트에서의 TypeScript 설치법 1.npx로 create-react-app 을 만들 때 typescript로 설정하는 방법 npx create-react-app my-app --template typescript # or yarn create react-app my-app --template typescript 2.만약 react 파일이 있고 ..

설치법 npm i styled-components 이용법 import styled from "styled-components" 사용 방법 const Father = styled.div` display: flex; `; const 이름 = styled.{htmltag 이름}` // props.bgColor}; width: 100px; height: 100px; `; function App() { return ( ); } export default App; 변수로 두고 싶은 css 코드에 ${props=>props.변수이름} 을 둔 후 이렇게 사용하면 됩니다. Extending (확장), 중복되는 css 내용에 속성을 추가하는 방법 import styled from "styled-components"; co..

useParams useParams는 URL 매개 변수의 키/값 쌍의 개체를 반환합니다. 현재 의 match.params에 액세스할 때 사용합니다. import { useParams } from "react-router"; const x = useParams(); console.log(x) // { id } = 12345 -->> const { id } =useParams(); console.log(id) // 12345 //응용 방법 const json = await ( await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`) ).json(); // 파라미터에서 받은 id 값을 url에서 id값을 넣어 api를 이용할 수 있다. ht..

import { useEffect, useState } from "react"; function Hello() { useEffect(() => { console.log("created"); // 생성될 때 호출 return () => console.log("destroyed"); // effect가 없어질 때 호출 }, []); return Hello; } function App() { const [text, setText] = useState(false); const onClick = () => { setText((current) => !current); }; return ( {!text ? : null} {!text ? "Hide" : "Show"} ); } export default App; 페이지..

useEffect 란 state를 불러올 때 모든 코드들이 불러와지는데 단 한번만 불러와야 하거나 특정한 상황에서만 불러오고 싶고 혹은 한가지만 변경해서 불러와야하는데 곁가지로 그 옆의 수천 수만개의 코드들이 불러와지는 상황을 막고자 리액트 측에서 useEffect라는 것을 개발하였다. import { useState } from "react"; function App() { const [counter, setCounter] = useState(0); const onClick = () => { setCounter((current) => current + 1); }; const [search, setSearch] = useState(""); const onChange = (event) => { setSea..