react 썸네일형 리스트형 [React][Next.js] <Link></Link>를 통한 라우터 기능 - <Link> 내부에 <a> 태그를 넣는 이유 사용 방법 import Link from 'next/link' function Home() { return ( About ) } export default Home Next.js에서 라우터 기능은 다음과 같이 사용합니다. ... 형식을 사용하지 않는 이유 React는 SPA(Single Page Application)구조를 가지고 있어 하나의 페이지에서 모든 행위들이 일어나야하는데 About us 형식을 사용하게 되면 새로고침(페이지 이동)을 하기 때문입니다. 내부에 태그를 넣는 이유 About 위와 같이 태그를 넣지 않아도 넣은 것과 외관상 차이가 없으며 기능도 정상적으로 동작하는 것을 확인할 수 있습니다. About 그러나 위와 같이 태그 내부에 class 요소를 추가하여 HTML를 랜더링하면 cla.. 더보기 [react-router-dom][v6] URL 파라미터를 통해 하위 경로로 이동하기 영화 리스트를 보여주는 페이지와 특정 영화의 상세 정보를 보여주는 페이지를 react-router-dom 패키지를 통해 구현하고자 했다. 다음과 같이 구현해도 정상적으로 동작하였지만 'movies'가 공통적으로 들어가기 때문에 하나의 그룹으로 경로를 묶고자 하였다. // 영화 리스트를 보여주는 페이지 // 영화 상세정보를 보여주는 페이지 따라서 다음과 같이 'movies'를 그룹화하여 구현하였다. // 영화 리스트를 보여주는 페이지 // 영화 상세정보를 보여주는 페이지 처음에는 다음과 같이 구현하였지만 정상 작동하지 않았다. // 영화 리스트를 보여주는 페이지 // 영화 상세정보를 보여주는 페이지 공식 문서에서 어떤 차이가 있어 정상 동작하지 않는지 확인하고자 하였으나 해당 페이지에는 별도의 내용이 기술.. 더보기 useState에서 이전 값을 참조하여 state값 변경하기 버튼을 클릭하여 이전 state 값을 2로 업데이트 하는 방법 올바른 방법 정상적으로 2씩 state가 증가됨. function App() { const [state, setState] = useState(0); const onClick = () => { useState((prev) => prev + 1); useState((prev) => prev + 1); }; {state} Count Up } 올바르지 않은 방법 1씩 증가됨. function App() { const [state, setState] = useState(0); const onClick = () => { useState(state + 1); useState(state + 1); }; {state} Count Up } 왜 1씩 증가되는가.. 더보기 React 시작(실행)하기 - Windows(윈도우) 기준 다음 4가지를 설치합니다. 1. VS Code (code.visualstudio.com/) 2. Git for Windows (gitforwindows.org/) 3. node.js (nodejs.org/ko/) 4. yarn (classic.yarnpkg.com/en/docs/install/#windows-stable) git bash를 열어Git Bash를 실행하여 React 프로젝트를 생성할 위치로 이동한 후 다음 명령어를 입력합니다. npm install -g create-react-app 이어서 다음 명령어를 입력합니다. // React 프로젝트 생성 create-react-app hello-react // 생성한 프로젝트로 이동 cd hello-react // React 실행 yarn start 더보기 이전 1 다음