최소 점수와 같다면( 평점 선택 안할 경우) 에는 만들어놓은 전체 영화 (movies)를 setFilterMovies에 넣고 만약에 평점을 선택했다면 setMinRationg에 평점을 저장하고 필터를 사용해서 평점 이상인 movies만 setFitlterMovies에 저장한다. handleFilter(8)} > 8+ Star handleFilter(7)} > 7+ Star handleFilter(6)} > 6+ Star 평점에 handleFilter 매개변수로 각 평점을 넣어준다. MovieCard컴포넌트 map반복분을 수정한다. 평점 8점 이상 active클래스 적용 평점 7점 이상 active클래스 적용 평점 6점 이상 active클래스 적용 정열 방법에 대한 state를 추가한다.

https://www.themoviedb.org/ The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 본인 API 키가 있어야 하므로 회원가입하고 API키 발급받는다. https://developer.themoviedb.org/reference/discover-movie Movie Find movies using over 30 filters and sort options. developer.themoviedb.org 필요한 쿼리스트링 확인한다. 인기순 조회 https://developer.themoviedb.org/reference/movie-..

가로로 구성해보고 싶어서 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..