Rosy's Artificial Intelligence Blog

Router이란? - 뷰 렌더링과 관련 - 뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 우선 어플리케이션을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달받아 보여줌 - Router? 다른 주소에 따라 다른 뷰를 보여주는것 - 리액트에는 Router 기능이 포함되지 않기 때문에 직접 브라우저의 API를 사용하고 상태를 설정하여 다른 뷰를 보여주어야 함 React-Router이란? - 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해줌 - 서버 사이드 렌더링도 도와주는 도구들이 함께 딸려옴 - 공식적으로 지원하는 라이브러리는 아님 npm install react-router-dom --save npm create-react-app routing npm install react-router-dom..

기본 헷갈리는 것 - (1)과 (2)는 똑같은 결과를 나타냄 (1) 함수형 ~ function App() { return ( CRUD APPLICATION ); } export default App; (2) 함수형 const const App =() => { return( CRUD APPLICATION ) } export default App; const & let const? - ES6 문법에서 새로 도입되었으며 한번 지정하고 나면 변경이 불가능한 상수를 선언할 떄 사용하는 키워드 import React, {Fragment} from 'react'; const App = () => { const name = "React Example"; return( Hello React {name} ) }; expo..

Redux - React 생태계에서 가장 사용률이 높은 상태관리 라이브러리(다른 상태관리 Redux, MobX) - React만 사용해도 애플리케이션을 개발할 수 있지만 규모가 커지고 구조가 조금이라도 복잡해지면 컴포넌트의 props나 State를 관리하는게 어려움 -> 그래서 상태 관리 라이브러리 redux를 사용하여 상태를 단순하게 처리함 - Store안에 State가 저장함, store에는 reducer가 반드시 있어야 함 - Reducer(Handle Action, change state = 변화를 일으키는 함수 ) 는 state와 action을 받아 적절한 로직을 처리하여 새로운 state를 반환하고 그 값을 반영하여 새롭게 render를 그리도록함 Redux Data Flow - 엄격한 uni..

React 시작 하기 - 다음과 같이 명령어를 쓰면 webpack & babel을 한꺼번에 쓸 수 있음 - 마지막의 "." 의미? 현재 폴더 안에 react를 시작하겠다~ npx create-react-app . React 기본 구조 - return함수에 jsx문법(HTML처럼 생긴 ) 를 그대도 넣어주면 됨 - 태그에 class를 주고 싶을때는 App.js import React from 'react'; import './App.css'; function App() { let name = "React App" return ( {name} ); } export default App; (1) 만약에 css파일을 적용하고 싶다? ClassName 지정 App.css (className="App" in App..

구구단 Component 만들기 참고) 겉보기에는 멀쩡한데 실행이 안됨 ㅠ_ㅠ 왜안될까? {} -> {}안에 javascript를 쓸 수 있음 this는 class의 this를 가리킨다. 나눠서 보기 cosntructor(props){ super(props); this.state = { first : Math.ceil(Math.random() * 9), second : Math.ceil(Math.random() * 9), value : '', result : '', }; } this.state = {}; : 변할 것 같은것을 state로 만든다 this.onSubmit - 직접 만들어준 함수들은 무조건 ()=> 화살표 함수를 써야 함 - 이때 function을 쓰면 안됨 ex) function (e) 이..

React - 페이스북에서 만든 2013년에 릴리즈된 프레임워크 혹은 라이브러리 (강좌마다 부르는 이름이 다름... ) - 페이스북이 단일 웹 사이트중에서 규모가 제일 크다 - 데이터와 화면이 synchronization 하는것이 중요한데 React가 효과적이다. - React는 기본적으로 javascript , js 파일 - React에서는 es6 문법을 지원 , 실험적인 문법을 지원하기 위해더 바벨 내에서 작성하게 됨 React를 사용한 코드 react -> react가 동작하는 핵심적인 코드 react-dom -> react 코드를 웹에다가 붙여주는 역할을 함 react시작하자마자 설치해야하는것 react와 react-dom을 설치해줘야 함 실제 배포할 때는 react.development -> r..