리액트13 [React] 리액트로 아주 간단한 todo-list 만들기 useState를 연습해보기 위해 간단한 일정 관리 앱을 만들어 보자. ※기능 연습이라 css는 적용하지 않음. 1. input과 버튼 생성 우선 할 일을 적을 input 창과 등록을 하기 위한 버튼을 만들어 주자. function App() { console.log(toDos); return ( Add TO Do ); } export default App; 아주 간단한 입력창과 버튼이 만들어졌다. 2. input창에 어떤 값이 들어왔는지 확인 우리는 입력창에 어떤 값이 들어 왔는지 알아야 한다. 입력 창에 어떤 값이 들어왔는지 알기 위해서는 useState를 사용해서 어떤 값이 들어 왔는지 계속 업데이트를 해 줘야 한다. import { useState } from "react"; function Ap.. 2023. 9. 24. [React] 간단한 코드로 애니메이션 만드는 법(Fade, Zoom, Flip 등) 여러 사이트에서 스크롤을 내리면 글자나 이미지가 나타나는 애니메이션을 볼 수 있다. 이것을 하나하나 코드로 작성하기에는 코드 양이 많아 질 수 있다. 이런 문제를 해결하기 위해 리액트에서 라이브러리를 제공해 준다. 이것을 사용하면 몇 줄 안되는 코드로 애니메이션을 만들 수 있다. https://www.react-reveal.com/ Home - React Reveal React Reveal React Reveal is high performance animation library for React. It's MIT licensed, has a small footprint and written specifically for React in ES6. It can be used to create various.. 2023. 7. 13. [React] API로 날씨 앱 만들기 3(OpenWeather API 사용) https://conquer-it.tistory.com/195 API로 날씨 앱 만들기 2(OpenWeather API 사용) [React] API로 날씨 앱 만들기 2(OpenWeather API 사용) https://conquer-it.tistory.com/194 API로 날씨 앱 만들기 1(OpenWeather API 사용) 4. 현재 위치한 날씨 데이터 보여주기 저번까지 동작은 하지 않는 UI까지 만들었다. 이제 API를 통해 이 UI가 동작하게 만들 차례 conquer-it.tistory.com 6. 도시별 날씨 가져오기 우선 여러 도시의 날씨를 불러오기 위해 App.js에서 city라는 state를 만든다. const [city, setCity] = useState(""); 그 후에 setCi.. 2023. 3. 1. [React] API로 날씨 앱 만들기 2(OpenWeather API 사용) https://conquer-it.tistory.com/194 API로 날씨 앱 만들기 1(OpenWeather API 사용) 4. 현재 위치한 날씨 데이터 보여주기 저번까지 동작은 하지 않는 UI까지 만들었다. 이제 API를 통해 이 UI가 동작하게 만들 차례이다. 이 작업은 state를 통해 진행을 해야 한다. weather라는 state를 만들고 이것을 WeatherBox의 props로 전달해 준다. App.js import { useEffect,useState } from 'react'; import './App.css'; import "bootstrap/dist/css/bootstrap.min.css"; import WeatherBox from "./component/WeatherBox"; im.. 2023. 2. 15. 이전 1 2 3 4 다음
