Redux 상태 관리 라이브러리 props ? 부모 → 자식, 변하지 않음 state ? 컴포넌트 안에서 전달, 변경 가능, 변하면 리 랜더링 리덕스의 좋은점은? 컴포넌트로 데이터 전달시 props로 하나씩 타고 올라가면서 주던가 타고 내려가면서 줘야한다. 하지만 리덕스는 리덕스 스토어에 저장하면 직접 접근 가능 리액트 컴포넌트 → 디스패치 → 액션 → 리듀서 → 스토어 → 컴포넌트 (한방향) 액션? 액션은 객체, 무엇이 일어나는 타입인지 (type), 그밖에 설명, 상태 알려줌 리듀서? 리듀서는 이전state가 액션을 만나서 next state(변화가 생긴) 것을 반환 스토어? store는 state를 감싸주는 역할 store안에는 여러가지 메소드가 있는데 이를 이용하여 관리할 수 있다. Setting..

https://www.npmjs.com/package/react-image-gallery react-image-gallery React carousel image gallery component with thumbnail and mobile support. Latest version: 1.2.7, last published: 6 months ago. Start using react-image-gallery in your project by running `npm i react-image-gallery`. There are 152 other projects in the npm r www.npmjs.com 설치 npm install react-image-gallery style import # CSS @im..

Dropzone 라이브러리 https://www.npmjs.com/package/react-dropzone react-dropzone Simple HTML5 drag-drop zone with React.js. Latest version: 12.0.4, last published: 5 days ago. Start using react-dropzone in your project by running `npm i react-dropzone`. There are 2423 other projects in the npm registry using react-dropzone. www.npmjs.com 설치 방법 npm install --save react-dropzone 사용 방법 import React from ..

1. NODE JS 와 EXPRESS JS 다운로드 하기 node.js ? 자바스크립트를 서버사이드에서도 사용이 가능하게 해준다. express.js? node를 쉽게 이용할 수 있게 해주는 프레임 워크이다. node.js 설치 1. node -v //버전확인 2. //노드 사이트에서 다운로드 받기 3. npm init //프로젝트 폴더를 만들고 안에다가 입력. 이는 package를 만드는 역할 4. 폴더에 들어가서 index.js 만들기 5. npm install express --save //express설치 2. 몽고 DB 연결 mongoose는 몽고db를 편하게 쓸 수 있는 툴이다. 설치하기 npm install mongoose --save const express = require("expres..

Props 1. properties를 줄인 말 2. 컴포넌트간에 전달할 때 3. 컴포넌트의 소통 방식은 위에서 아래로 , 즉 부모 컴포넌트에서 자식 컴포넌트로 보낼 수 있음 4. 부모 컴포넌트에서 자식 컴포넌트에 전달 할 때, 이를 변경 할 수 없다. State 1. 컴포넌트 안에서 데이터를 교환하거나 전달 할 때 사용 2. props와 달리 변경이 가능하다. 3. state이 변화면 re-render 된다. Redux 리덕스가 없을 경우 props 하나하나 거쳐야 한다. state를 상위 컴포넌트에 두는 것이 아닌, redux store에 저장하면 직접 접근이 가능하다. 훨씬 편한 state 관리가 가능! Redux 데이터 Flow (Strict unidirectional data flow) Redux..

기능 구현 다음에 가장 중요한 것은 바로 성능향상과 유지관리이다! 리액트도 컴포넌트의 로딩속도 등 향상시킬 수 있는 방법이 존재한다 1. 함수나 오브젝트는 변수에 담아 쓰는게 좋다! 부제 : 익명함수/익명object 안쓰기 =메모리공간을 아낄 수 있는 JS 코딩 관습 function Cart(){ return ( ) } 콜백함수나 오브젝트를 써넣지 말고 var 스타일 = {color : 'red'}; function Cart(){ return ( ) } 컴포넌트 바깥에 있는 변수에 저장해서 사용하자! 강의에선 function Cart 안에 넣는데 그거 아니고 바깥에 넣자! 왜냐면 컴포넌트가 재렌더링될 때 변수에 저장되지 않은 이름없는 object, function 류의 자료형들은 매번 새로운 메모리 영역..

자바스크립트의 sync / async 자바스크립트는 일방적으로 동기방식이다. 윗줄부터 차례로 코드가 실행 된다. 하지만 sync / async 함수를 사용하면 비동기적으로 코드실행이 가능하다. 순차적 실행이 아닌, 완료되면 실행이 된다. (ajax, 이벤트리스너, setTimeout 이런 함수들을 쓸 때 그런 현상이 일어남) 예를들어 console.log(1+1) axios로 get요청하고나서 console.log(1+2) 실행해주셈 console.log(1+3) 이럴 경우에는 2, 4, 3 이 순서대로 출력이 된다. 3을 출력하는 코드가 asynchronous 처리를 지원하는 코드인데, 3을 출력할 때 오래걸리면 완료될 때 까지 잠깐 보류했다가 다른 코드를 먼저 실행시킨다는 소리이다. 심지어 ajax요..

1. 컴포넌트 안에서 쓰는 if/else function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } JSX를 조건부로 보여주고 싶을때 사용 우리가 자주 쓰던 자바스크립트 if문은 return () 안의 JSX 내에서는 사용 불가능 if (어쩌구) {저쩌구} 이게 안되므로. return + JSX 전체를 퉤 뱉는 if문을 작성해서 사용! function Component() { if ( true ) { return 참이면 보여줄 HTML; } return null; } else 생략이 가능 2. JSX안에서 쓰는 삼항연산자 =ternary operator 조건문 ? 조건문 참일때 실행할 코드 : 거짓일 때 실행할 코..