nata_developer

0.앱 구조 blog-app api db.json client public index.html modal.html src actions index.js types.js apis streams.js components StreamCreate.js StreamDelete.js StreamEdit.js StreamForm.js StreamList.js App.js GoogleAuth.js Header.js Modal.js reducers authReducer.js index.js streamReducer.js history.js index.js 1.api/streams.js npm i axios import axios from "axios" export default axios.create({ baseURL:..

React 2020. 8. 20. 14:48

0.앱 구조 blog-app api db.json client public index.html modal.html src actions index.js types.js apis streams.js components StreamCreate.js StreamDelete.js StreamEdit.js StreamForm.js StreamList.js App.js GoogleAuth.js Header.js Modal.js reducers authReducer.js index.js streamReducer.js history.js index.js 1.src/GoogleAuth.js import React from 'react'; import { connect } from 'react-redux'; import ..

React 2020. 8. 20. 14:03

* https://velog.io/@josworks27/react-router-dom-history를 참고하였습니다. * https://blog.naver.com/PostView.nhn?blogId=backsajang420&logNo=221158623399 1.라우팅 이란? 사용자가 어떤 주소(URL)로 들어갔을때, 그 주소에 해당하는 페이지를 사용자에게 보내주는 것이다. 2.BROWSER ROUTER import {BrowserRouter} from 'react-router-dom'; react-router-dom 을 적용시키고 싶은 최상위 컴포넌트에 감싸주는 wrapper component이다. ReactDom.render( , document.getElementById('root')) 3.ROUTE..

React 2020. 8. 20. 13:15

0.앱 구조 blog-app api db.json client public index.html modal.html src actions index.js types.js apis streams.js components StreamCreate.js StreamDelete.js StreamEdit.js StreamForm.js StreamList.js App.js GoogleAuth.js Header.js Modal.js reducers authReducer.js index.js streamReducer.js history.js index.js 1api/db.json // npm 설치 npm i json-server // json-server 가동 "scripts": { "start": "json-server..

React 2020. 8. 20. 12:42

1.Redux란? 상태 관리 라이브러리다. 복잡한 애플리케이션을 쉽게 만들어 준다. 리액트 앱을 만들지 않아도 된다. 리액트를 위해서만 사용하지 않는다. 2.왜 Redux를 사용해야 할까? 2.Redux Cycle 3.Redux 예제 1 actions/index.js export const selectSong = song => { return { type: "SONG_SELECTED", payload: song } } reducers/index.js import { combineReducers } from "redux" const songsReducer = () => { return [ { title: 'No Scrubs', duration: '4:05' }, { title: 'Macarena', dur..

React 2020. 8. 11. 12:10

1.REACT REF란? Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다.' 일반적인 React의 데이터 플로우에서 props는 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단입니다. 자식을 수정하려면 새로운 props를 전달하여 자식을 다시 렌더링해야 합니다. 그러나, 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 하는 경우도 가끔씩 있습니다. 수정할 자식은 React 컴포넌트의 인스턴스일 수도 있고, DOM 엘리먼트일 수도 있습니다. React는 두 경우 모두를 위한 해결책을 제공합니다. 2.REF를 사용해야 할 때 Ref의 바람직한 사용 사례는 다음과 같습니다. 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애..

JavaScript Library 2020. 8. 10. 15:44

1. WHY CONTROLLED COMPONENTS & UNCONTROLLED COMPONENTS ? React는 내부의 상태(state)를 '신뢰 가능한 단일 소스(Single Source of Truth)'로 관리하려는 설계 원칙을 가지고 있다. 자식 컴포넌트가 data가 필요할 경우, 해당 data는 가장 가까운 공통 부모 컴포넌트에게서만 props의 형태로 전달받아서 사용해야 한다. 대부분의 HTML 엘리먼트들(ex. 등)은 엘리먼트가 내부적으로 어떤 데이터를 가지지 않기 때문에 문제될 것이 없다. 하지만 HTML 엘리멘트 중 자체적으로 특정 data를 가지는 엘리먼트들이 있다. 바로 태그의 엘리먼트들이다.(, , 등) 이들은 user가 DOM에서 어떤 정보를 입력하거나 선택할 경우, 해당 정보를..

React 2020. 8. 10. 15:12

1.리액트가 해왔던 방식 FUNCTIONAL COMPONENTS 유저에게 컨텐츠를 보여주기 위해 JSX를 생산할 수 있다. CLASS COMPONENTS 유저에게 컨텐츠를 보여주기 위해 JSX를 생산할 수 있다. 라이프사이클 메서드를 사용할 수 있다. STATE 시스템을 사용할 수 있다. *주의 클래스 컴포넌트는 반드시 자바스크립트 클래스여야 한다. 반드시 React.Component를 상속받아야 한다. 반드시 JSX를 반환하는 render를 정의해야 한다. 4. 지금의 리액트 CLASS COMPONENTS에서는 라이프사이클 메써드와 STATE를 사용하지만, FUNCTION COMPONENTS에서는 HOOKS를 사용한다. 5.그렇다면 CLASS와 FUNCTIONAL 중 어떤 것을 사용해야 할까? 이미 확..

React 2020. 8. 10. 12:52