Reactjs3 [ReactJS] react-router 활용하여 게시글 상세 페이지 구성 및 마무리 (React로 아주 간단한 게시판 만들기 - 4) React는 SPA(Single Page Application) 시스템 구성에 최적화 된 Framework로서 페이지를 이동할 때 일반적인 웹 페이지의 페이지 전환과는 조금 다른 방식으로 구성을 해야됩니다. 혹은 React의 가상 DOM이 최종 Mounting 되는 HTML 페이지를 여러개 만들어 특정 URL을 특정 HTML에 매핑해주고 각 HTML 페이지마다 index Componnet를 구성하는 방법도 있겠으나 간단하게 react-router를 사용하여 URL에 따라 컴포넌트를 각 URL에 해당되는 페이지로 사용될 수 있도록 할 수 있습니다. 이전글 2020/10/29 - [ReactJS] - [ReactJS] useState(), useEffect() 사용하여 데이터 요청 및 관리 (ReactJS로.. 2020. 10. 29. [ReactJS] React Hook useState(), useEffect() 사용하여 데이터 요청 및 관리 (React로 아주 간단한 게시판 만들기 - 3) 이번장에서는 React의 핵심 기능이라고 할 수 있는 컴포넌트에서 사용되는 useState()와 useEffect()를 활용하여 이전에 게시글 목록 구성에 사용되었던 mock 데이터 구조를 변경하도록 하겠습니다. 우선 해당 포스팅은 React에만 초점이 맞춰져 있기 때문에 별도의 API는 구성하지 않을겁니다. 따라서 통상적으로 이루어지는 useEffect 과정에서의 ajax 요청 대신에 소스상에 게시글 목록 데이터를 가지고 있는 전역변수를 두고 해당 값을 사용하는 방향으로 작성됩니다. 이전글 2020/10/29 - [ReactJS] - [ReactJS] 핵심 Component 만들기 및 게시글 목록 페이지 구성 (ReactJS로 아주 간단한 게시판 만들기 - 2) [ReactJS] 핵심 Component.. 2020. 10. 29. [ReactJS] 핵심 Component 만들기 및 게시글 목록 페이지 구성 (React로 아주 간단한 게시판 만들기 - 2) 구조화된 React Component 생성 및 게시글 목록 페이지 구성하기 이전글 2020/10/29 - [ReactJS] - [ReactJS] React 프로젝트 생성 및 실행 (ReactJS로 아주 간단한 게시판 만들기 - 1) [ReactJS] React 프로젝트 생성 및 실행 (ReactJS로 아주 간단한 게시판 만들기 - 1) ReactJS로 게시판 만들기입니다. (극도로 단순한 구성 주의) NPM (Node Package Manager) 설치 확인 npm -v 6.14.8 create-react-app 모듈 설치 sudo npm install -g create-react-app create-react-app 을 활용한.. antdev.tistory.com 먼저 사용할 컴포넌트 목록입니다. Po.. 2020. 10. 29. 이전 1 다음
