일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- async
- JS #프로젝트
- https://m.blog.naver.com/tt2t2am1118/221010125300
- prj
- https://youtube.com/playlist?list=PLuHgQVnccGMA5836CvWfieEQy0T0ov6Jh&si=FTaYv8m21EhO-A2K
- 참고블로그
- 동기
- addEventListener
- await
- 게임
- ajax
- 혼프
- sql
- Porject
- 비동기
- db
- slow and steady
- Project
- js
- Import
- callback
- mysql
- promise
- database
- execCommand
- setTimeout()
- webpack
- eport
- object
- json
- Today
- Total
목록⚛️React (46)
C-log
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ETnp7/btsEVGvI6SD/GtRwnxzsDFpL94jBsfyyB1/img.jpg)
이번 포스팅에서는 react-router-dom을 사용해서 우리가 만들어 놓은 컴포넌트들을 페이지간 이동이 가능하게 만들 것이다. 우선 react-router-dom을 설치하면 된다. 코드는 아래와 같다. import { BrowserRouter, Routes, Route } from "react-router-dom" import Home from "./routes/Home"; import Detail from "./routes/Detail"; export default function SubApp() { return ( ) } 강의에서는 switch문을 사용할 것이다. switch문은 react ver5까지 지원을 해주고 이후 ver6부터는 Routes를 사용해야한다. Route에 컴포넌트를 열결하는 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/JXpz4/btsEuAWiF0E/UdPLW4scjaTNKwyzCtLm61/img.jpg)
이번 시간에는 영화 웹사이트를 만드는 연습을 해볼 것이다. 지금까지 배운 것들의 반복이기에 복습 연습을 한다고 생각하고 포스팅을 보면 좋을 것 같다. 먼저 API를 연결 해야한다. 해당 API는 yts라는 영화 정보 사이트에서 받아 올 수 있다. 아래 코드를 살펴보자. import { useEffect, useState } from "react"; export default function SubApp() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); useEffect(() => { fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/BRfsK/btsEnVl3Mat/JAgRTlI9RufDDjbsr6N1w0/img.jpg)
이번 포스팅에선 이전 포스팅에 이어서 ToDo List를 마무리 해볼 것이다. 우리가 input태그에 작성한 값들이 useState 배열에 값을 저장하게 했다. 이 배열 값들을 우리는 브라우저 UI로 나올 수 있게 코드를 작성할 것이다. 이전에도 우리가 해보았듯 배열 값을 jsx에 효율 적으로 반복시키기 위해선 map함수를 사용 해야한다. 아래 코드를 살펴보자. import { useState } from "react" export default function SubApp() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bj769f/btsEtje4Gsl/P1X38USOkTIJNBdgllI7ZK/img.jpg)
이번 포스팅은 우리가 지금까지 배운 것들을 가지고 간단한 ToDo List를 만들어 볼 것이다. 지금까지 배운 것을 잘만 따라 왔다면 어려움 없이 진행할 것이다. 코드는 아래와 같다. import { useState } from "react" export default function SubApp() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { return; } setToDo("..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dXgtav/btsEkCgrlwf/6fwJA7GxdYeN06qWiTqXK0/img.jpg)
이번 포스팅에서는 useEffect에서 사용되는 cleanup 함수를 배워 볼 것이다. cleanup 함수는 주로 useEffect 훅에서 사용되는 함수이다. 해당 useEffect가 더 이상 필요하지 않을 때 어떻게 정리할 것인지를 정의하는 역할을 한다. useEffect 훅은 컴포넌트가 렌더링될 때마다 특정 효과를 발생시키는 데 사용된다. 이때, 해당 효과가 필요하지 않아지면 그에 대한 정리 작업을 수행하기 위해 cleanup 함수가 활용된다. cleanup 함수는 useEffect 안에서 반환되는 함수로 컴포넌트의 렌더링이 사라질 때 또는 특정 조건이 변할 때 실행된다. 코드를 우선 살펴보자. import { useState, useEffect } from "react"; function Hello..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bhmkVH/btsEm9jTaf9/Ot1df8UIsYYhIFPCKwaZDK/img.jpg)
이번 포스팅에서는 useEffect로 특정 상태가 변화 되었을 때 React가 랜더링이 될 수 있게 할 것이다. 먼저 아래 코드를 살펴보자 import { useEffect } from "react"; export default function SubApp() { function onClick() { console.log("Click!"); } console.log("I run all the time"); useEffect(() => { console.log("Call The Api.."); }, []) return ( useEffect Click me ) } SubApp.js:7 I run all the time SubApp.js:9 Call The Api.. //클릭시 호출 되는 함수 SubApp.j..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ciJMIE/btsEnRQAovm/NiqNs3nnjmmCF96PuRt24k/img.jpg)
이번 시간에는 propsTypes에 관해서 포스팅을 해볼 것이다. propTypes은 React에서 컴포넌트의 props에 대한 유형을 검사하고 정의하는 데 사용되는 기능이다. 이는 코드의 안정성을 높이고 잘못된 사용 또는 전달된 데이터에 대한 오류를 미리 방지하는데 도움이 된다. 이는 TypeScript와 비슷한 역할을 하는 것이지만 아직 propsTypes에 익숙하지 않아서 조금은 잘 모르겠다. 우선 현재 우리 CDN을 이용해서 코드를 작성하기에 porpsTypes를 사용하려면 CDN을 추가해야한다. 아래 코들르 추가하면 된다. 이를 추가하고 아래 코드를 작성하면 된다. function Btn({ text, fontSize = 30 }) { console.log(text, "was Rendered")..