가로로 구성해보고 싶어서 css를 수정했다. 그리고 리스트가 많아지면 가로로 스크롤바가 늘어나는데, https://github.com/Norserium/react-indiana-drag-scroll GitHub - Norserium/react-indiana-drag-scroll: React component which implements scrolling via holding the mouse button or touch React component which implements scrolling via holding the mouse button or touch - GitHub - Norserium/react-indiana-drag-scroll: React component which implement..

현재 폼에는 두 가지를 설정할 수 있다. 1. 일정 2. 진행 상황 이 두 가지가 변하면 자동으로 리랜더링 되게끔 useState로 관리한다. 아래와 같이 각 각 관리도 가능하지만 이 두개는 하나의 폼에서 입력되는 값이므로 객체에 담아서 사용이 가능하다. 그리고 폼에도 input창에 값이 바뀌면 setTask로 바뀐 값이 업데이트돼서 저장되게끔 코드를 수정한다. const handleChange = (e) => { const { name, value } = e.target; setTaskData((prev) => { return { ...prev, [name]: value }; }); }; const handleSubmit = (e) => { e.preventDefault(); console.log(ta..

기존에는 npm create-react-app 으로 만들었는데, 속도가 느려서 vite@latest를 사용하기로 함 npm create vite@latest npm start와 같은 기능 vsCode로 열어보면 이전에 create-react-app으로 설치한 파일들과 살짝 다르다 public : 정적 파일들만 넣음 (이미지 .. 바뀌지 않는 파일들) index.html 은 그대로 사용하면됨 src 폴더안에 파일들도 크게 바꿀것없음 index.js와 동일한 기능을 하는 것이 main.jsx임 App.js 가 App.jsx임 index.css * { margin: 0; padding: 0; box-sizing: border-box; } App.css .app { display: grid; grid-templ..

그냥 배포하면 env 파일이 없기 때문에 아까 만들어 놓은 .env 에서 키 랑 값을 가져온다. https://react-imagegallery-joeuni.netlify.app/ 이미지 갤러리 react-imagegallery-joeuni.netlify.app

function App() { return ( Photo by John Doe Views: 4000 Downloads: 300 Likes: 400 #tag1 #tag2 #tag3 ); } export default App; https://pixabay.com/api/docs/ Pixabay API Documentation lang str Language code of the language to be searched in. Accepted values: cs, da, de, en, es, fr, id, it, hu, nl, no, pl, pt, ro, sk, fi, sv, tr, vi, th, bg, ru, el, ja, ko, zh Default: "en" category str Filter resul..

code . 로 vsCode열기 필요없는 파일들을 삭제한다. 테일윈드 CSS https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. tailwindcss.com 테일윈드 CSS 홈페이지에서 사용법을 확인하면 나오는 라이브러리 설치 코드를 복사하여서 터미널에서 실행한다. index.css . 위의 가 정확하게 어떤 css가 적용된지 확인하기 쉽도록 확장 프로그램 설치 tailwindcss는 부트스트랩처럼 CSS를 편하게 사용하도록 도와주는..

https://m.blog.naver.com/c-maker/223241868650 [React] State, Map, Filter State 컴포넌트 내부에서 관리되는 변경이 가능한 데이터 변수는 값이 변한다고 해서 화면이 다시 렌더링... blog.naver.com https://narup.tistory.com/196 [React] React.js 강좌 10. map, slice, concat, spread 사용법 React map, slice, concat, spread 사용법 1. 기본적인 map() 사용법 map()함수는 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용해 처리된 새로운 결과를 새로운 배열에 담아 반환하는 함수입니다! const narup.tistory.com

useEffect는 두 개의 인수를 받는다. 첫 번째는 함수이고, 두 번째는 의존성 배열이다. 함수에는 어떤 sideEffect 코드라도 넣을 수 있다. 그리고 이 함수는 두 번째 인수로 주어질 [의존성 배열] 안에 담긴 값에 변경사항이 생길 경우에만 실행된다. 즉, 의존성 배열이 Side Effect가 실행될 타이밍을 알려준다라고 생각하면 된다. 만약, useEffect()가 포함된 컴포넌트가 재랜더링되더라도 이 함수는 실행되지 않는다. 오로지 [의존성 배열] 안에 담긴 값이 변경될 때만 실행되기 때문임. 만약 위의 경우 처럼 의존성 배열이 없을 경우에는 컴포넌트가 재 랜더링 될 때 마다 함수가 실행된다. 만약 위처럼, 두 번째 인수에 [] 빈 배열이 주어진 경우엔, 처음 컴포넌트가 실행된 순간에만 u..

이제 추가된 각 동물의 목록(Pet 컴포넌트) 에 삭제 버튼을 추가하여 목록에 있는 동물을 삭제하는 기능을 구현하고자 한다. Pet 컴포넌트에서 props를 id 값이 넘어 가도록 작성한다. 해당 아이디 값으로 filter를 사용하여 삭제할 예정임 그리고 setPets함수도 넘겨줘서, Pets의 변동이 있을 때 ( 삭제 처리) 바로 리랜더링하도록 할 예정이다. 일단 버튼을 추가해주고 삭제 버튼을 클릭하면 handleDelete 함수가 실행되도록 한다. handleDelete함수는 삭제 버튼 클릭! 이라는 메세지를 담은 alert창을 띄운다. handleDelete함수를 수정한다. props에서 넘어오는 setPets함수를 사용할거고 이 함수의 주요 목적은 props.id와 각 pet의 id를 비교하여 p..

현재는 브라우저를 새로고침하면 모두 초기화된다. 실제 앱은 DB에 저장해서 마지막 상태가 업데이트 되어야 함 영속성(persistence)은 생성한 프로그램의 실행이 종료되더라도 사라지지 않는 데이터의 특성을 의미함 localstorage에 저장해서 영속성을 유지해 보도록 하겠다. 현재 useState에 저장되어있던 초기 동물 값을 다 지우고, 빈 배열을 만든다. useEffect(() => { //처음 실행시 한 번 실행됨(초기값을 넣을 때 사용한다. ) }, []); useEffect(() => { //pets가 변경될 때 마다 실행됨 }, [pets]); useEffect를 통해서 내가 구현하고자 하는 두 가지 기능은 아래와 같다. 1.처음 앱 실행시 데이터 불러오기 useEffect(() => {..