nata_developer

* 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. 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

1.Props란? 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내는 것이다. Props의 목적은 자식 컴포넌트를 다루는 것이다. 2.Props의 이점 컴포넌트의 중첩,재사용,설정이 가능해진다. 3.Props 예제 1 App.js import React from "react"; import faker from "faker"; import CommentDetail from "./CommentDetail"; import ApprovalCard from "./ApprovalCard"; const App = () => { return ( ); }; export default App; 부모 컴포넌트인 App에서 CommentDetail에게 author,timeAgo,content,avartar에 대한 정보를 보내주..

React 2020. 8. 9. 20:03

1.React란? 리액트는 자바스크립트 라이브러리다. 리액트의 궁극적인 목적은 유저에게 컨텐츠를 보여주고 유저와의 상호작용을 다루는 것이다. 2.React Components 자바스크립트의 클래스이다. 리액트의 컴포넌트는 자바스크립트의 함수와 클래스를 사용한다. 3.왜 react와 react-dom 두 가지 라이브러리를 같이 사용해? 리액트는 두 가지 라이브러리로 나뉜다. "React"는 무엇이 컴포넌트인지 알고, 어떻게 컴포넌트가 함께 작동할 수 있는지 안다. "ReactDOM"은 어떻게 컴포넌트를 취하고, DOM에 어떻게 컴포넌트를 올릴지 안다. 4.CRA 5.SPA 6.작동 원리

React 2020. 8. 9. 19:22

*udemy의 Modern React with Redux [2020 Update]를 참고하였습니다. 1.JSX란? 자바스크립트에 HTML 문법을 사용할 수 있게 해주는 JS확장 문법 1. 자바스크립트의 특별한 문법이다. 2. 브라우저는 JSX를 이해하지 못한다. 그래서 우리는 JSX를 쓰고나서 JSX를 보통의 JS로 만들기 위해 tool을 이용한다. 3.몇몇 차이가 있지만, HMTL과 매우 비슷한 모양과 기능을 가졌다. const app = () => { return Hello World } ====> "use strict"; var App = function App() { return /*#__PURE__*/React.createElement("div", null, "Hello World"); }; 2..

React 2020. 8. 9. 18:53