Javascript/React.js7 [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. [ReactJS] React 프로젝트 생성 및 실행 (React로 아주 간단한 게시판 만들기 - 1) ReactJS로 게시판 만들기입니다. (극도로 단순한 구성 주의) NPM (Node Package Manager) 설치 확인 npm -v 6.14.8 create-react-app 모듈 설치 sudo npm install -g create-react-app create-react-app 을 활용한 프로젝트 생성 프로젝트 (디렉토리 명) - react-simple-blog create-react-app react-simple-blog Creating a new React app in /Users/imchaehun/workspace/react/react-simple-blog. Installing packages. This might take a couple of minutes. Installing react.. 2020. 10. 29. [ReactJS] React JSX (React 기본 -3장) 1. JSX란? JSX는 React의 문법으로 HTML문법을 잘 알고있다면 자바스크립트 코드내에서 HTML코드를 손쉽게 작성할 수 있도록 지원하는 문법입니다. 2. JSX의 적용 - JSX 적용 전 1 2 3 4 5 6 7 8 9 import React, { Component } from 'react'; class App extends Component { render() { return React.createElement('div', null, React.createElement('h1', null, 'Hello React')); } } export default App; Colored by Color Scripter cs - JSX 적용 후 1 2 3 4 5 6 7 8 9 10 11 12 13 imp.. 2019. 4. 1. [ReactJS] Visual Studio Code + create-react-app으로 프로젝트 환경 구성 (React 기본 -2장) 2019/03/26 - [ReactJS] - [ReactJS] ReactJS 시작하기 (React 기본 -1장) 1. create-react-app이란? React를 활용해 개발을 하기위해선 기본적으로 자바스크립트 외부 모듈인 react, react-dom, react-scripts 이 세가지의 모듈이 필수로 존재해야됩니다., 또한 webpack, babel과 같은 외부 모듈을 이용해 ECMAScript 기준으로 비교적 상위 버전의 문법을 지원하지 않는 브라우저를 위해 상위 버전의 문법으로 작성된 자바스크립트 소스파일을 보다 낮은 버전의 문법으로의 변환 또는 트랜스파일링(Transfiling)을 가능하게하는 로직들도 직접 구성해야됩니다. 그러나 create-react-app이란 모듈은 앞서 언급한 과정들.. 2019. 3. 30. [ReactJS] ReactJS 시작하기 (React 기본 -1장) ReactJS 공식문서 참고 사이트 https://reactjs.org/ 1. ReactJS란? React는 Facebook에서 개발한 Javascript Framework입니다. 자세히는 일반적인 웹 어플리케이션 설계 구조인 MVC모델에서 V (View)를 담당하는 Javascript UI Framework (프론트엔드 프레임워크) 입니다. 2. React의 주요 특징 1. 컴포넌트 (Component) 페이지에 보여줄 내용들을 컴포넌트화 하여 효율적인 소스코드 관리로 인한 유지보수 용이합니다. 2. 효율적인 컴포넌트 갱신 어떤 특정한 데이터가 변하는 컴포넌트가 존재한다면 그 해당 컴포넌트만 재갱신함으로써 효율적인 컴포넌크 갱신 및 렌더링을 합니다. 3. 가상 DOM (Virtual DOM) 사용 가상.. 2019. 3. 26. 이전 1 다음
