본문 바로가기

react17

[React + TS] 대한민국 지역 선택(시, 군, 구) Select Box 만들기 프로젝트에 들어갈 지역 선택 select box를 만들어야 했다.다른 방법들은 복잡한거 같아 무식하지만 확실한 방법을 선택했다. 그냥 냅다  지역을 배열로 구현하였다.export const area = [ { name: "서울", subArea: [ "강남구", "강동구", "강북구", "강서구", "관악구", "광진구", "구로구", "금천구", "노원구", "도봉구", "동대문구", "동작구", "마포구", "서대문구", "서초구", "성동구", "성북구", "송파구", "양천구", "영등포구", "용산.. 2024. 8. 16.
[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] React로 간단한 H&M 사이트 만들기1 오늘은 React로 쇼핑몰 사이트인 H&M 사이트를 약간 간단한 버젼으로 만들어 볼 것이다. 우선 개발 순서는 아래와 같다. 1. 페이지는 총 전체 상품 페이지, 로그인 페이지, 상품상세 페이지 3개가 있다. 2. 전체 상품페이지에서 전체 상품을 볼 수 있다. 3. 로그인 버튼을 누르면 로그인 페이지가 나온다. 4. 상품 디테일을 눌렀으나. 로그인이 되어있지 않은 경우 로그인 페이지가 먼저 나온다. 5. 로그인이 되어있을 경우에는 상품 디테일 페이지를 볼 수 있다. 6. 로그아웃 버튼을 클릭하면 로그아웃이 된다. 7. 로그아웃이 되면 상품 디테일페이지를 볼 수 없으며 다시 로그인 페이지가 보인다. 8. 로그인을 하면 로그아웃 버튼이 보이고 로그아웃을 하면 로그인 버튼이 보인다. 9. 검색창을 통해 상품을.. 2023. 3. 20.

티스토리툴바