Redux 란?
·
FrontEnd/React
1. Redux의 주요 개념 Redux는 Flex 아키텍쳐를 기반으로 설계되었으며, 단일 상태 관리(store)를 중심으로 동작한다. 1) Store애플리케이션의 중앙 상태 저장소 이다.상태는 하나의 store에 저장되며, 전역에서 접근 가능하다.컴포넌트가 직접 상태를 변경할 수 없고, 상태 변경은 오직 Action과 Reducer를 통해 이루어진다. 2) Action상태를 변경하기 위한 명령 객체이다.액션 객체는 보통 type 속성을 가지며, 추가 데이터를 포함하기 위해 payload 속성을 가질 수 있다.const action = { type: 'INCREMENT', payload: 1 }; 3) Reducer상태(state)와 Action을 입력받아 새로운 상태를 반환하는 순수 함수이다.상태를 직접..
React 기본 문법 연습
·
FrontEnd/React
본격적인 React 실습을 들어가며 React의 기본 구조와 기본 문법을 이해하기 위해 연습을 하게 되었다. React는 App.js에서 작업을 한다   function의 return 내부 구문이 JSX 기반의 컴포넌트 구문이다.그리고 App.js는 index.js에 import되어 활용되고 있었다.     function App( ) 함수 외부 함수 호출 뭔가를 작업하고 싶은데 코드의 양이 많거나, 성격이 다르거나, 다른 곳에서 함수를 호출하고 싶을 때, 다른 위치에 Class 또는 function을 만들어서 function App( )에서 호출한다. Class 컴포넌트 type 작업import { Component } from "react";//클래스 컴포넌트 (유닛화) : //조립식 프로젝트에서 효..
React 사용 환경 설정
·
FrontEnd/React
1. Node.js 설치 https://nodejs.org/en/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org    위 사이트를 들어갔을때 나오는 페이지에서 다운로드를 했다.  다운로드한 파일을 더블 클릭하고 전부 Next 를 누른 다음 Install 하여 설치하였다.   npm -vnode -vnpx -v 명령 프롬프트에서 다운 되었는지 버전을 확인했다. ▼ npx 가 없을 경우더보기npx가 없을 경우에 npm으로 'React 개발환경 설치를 위한 create-react-app' 을 먼저 실행한다.   > npm install -g cre..