Web/React
-
<Xml/> in React : JSXWeb/React 2020. 2. 3. 19:07
🔽 React에서 Xml(JSX) 사용 예시 html과 다른 점 (1) 주의해야 할 것은, html에서 쓰던 대로 class라고 쓰면 안되고, 대신 className이라고 적어줘야 한다. 아래처럼 class라고 쓰면 class Component의 class와 혼동하기 때문에 에러가 난다. html과 다른 점 (2) : Label for html에서는 예시 처럼 쓰지만 Javascript에서는 for가 loop를 의미한다. 마찬가지로 혼동 될 수 있기때문에 label for="" 대신에 label htmlFor=""로 써야한다. html과 다른 점 (3) : Style의 적용 style 적용의 경우 double {} 에 넣어야한다. 🔽아무 style 적용되지 않은 img와, style={{ borderRa..
-
axios: How to useWeb/React 2020. 1. 31. 22:41
(1) axios로 Data 가져오기 axios는 데이터를 가져올 수 있도록 도와준다. url 자리에 가져오고 싶은 데이터의 실제 url을 넣으면 된다. componentDidMount가 실행되는 동안, 즉 data를 가져오는 동안 좀 시간이 걸릴 수도 있는데, 그걸 JS에게 알려줘야 한다. async를 사용하는데, 이 과정에서 함수를 분리해줄수도 있다. async가 함수를 비동기로 만들어 주고 JS는 axios가 끝날 때까지 await했다가 나머지를 실행한다. componenetDidMount가 실행되면 getMovies function이 실행되고 JS는 getMovies가 async function 인 것, await key Word를 사용하고 있는 것을 인식하여 axios가 끝날 때까지 기다린다. ..
-
React 연습(1) 주문 form 만들기Web/React 2020. 1. 31. 17:16
import React from "react"; class Amount extends React.Component { state = { count: 0 }; plus = () => { this.setState(current => ({ count: current.count + 1 })); }; minus = () => { this.setState(current => ({ count: current.count - 1 })); }; render() { return ( I want get {this.state.count} EA One More One Less ); } } function Else() { return ( Enter your Name Enter your Address Enter your email ..
-
Class Components 와 StateWeb/React 2020. 1. 30. 21:40
State는 class Component 에서만 쓰일 수 있다. Class Component 🔼이렇게 생긴걸 function Component 라고 부르는데 🔼 이렇게 생긴건 class Component 라고 부른다. react Component로 부터 확장된 Component이고 function이 아니기 때문에 return을 쓸 수 없다. 대신 render를 쓴다. 그리고 그 안에 return을 쓸 수 있다. react는 자동적으로 render() method를 실행시킨다. State(object) -Component의 데이터를 넣을 공간이 있고 이 데이터는 변한다. -Dynamic Data와 함께 쓰임 위 코드는 state의 default가 0으로 설정되어있고 그 수는 변할 수 있다. 아래처럼 Htm..
-
JSX: Components 와 PropsWeb/React 2020. 1. 30. 19:42
React를 이해하기 위해서는 JSX라는 개념을 알아야하는데 JSX는 Xml + Javascript를 의미한다. JS와 html을 알고 있다면 어렵지 않다. 대신 JSX만의 문법이 몇 가지 있는데 첫 번째가 Components이다. JSX(1) : components & Props Components를 쓰면 반복되는 부분을 획기적으로 재사용 할 수 있다. props로 아래 사진의 Noodel이나 Coffee처럼 달라지는 부분을 컨트롤 할 수 있다. console.log(props)를 해보면 props 안에 fav라는 object가 들어있다는 걸 알 수 있다. 그 fav를 쓰기 위해서는 argument로 (function의 괄호 안에) props를 가져와서 {props.fav}로 쓸 수도 있지만 {fav}..
-
React 시작하기Web/React 2020. 1. 30. 16:57
babel이나 webpack을 사용하는 대신 React creative app을 만들 수 있다. (1)Requirements for react app : node, npm, npx (2) iterm에서 create-react-app만들기 $cd Documents $npx create-react-app movie_app_2020 밑줄 친 부분은 app의 name $code movie_app_2020 이렇게 하면 VSC가 바로 열림 (3) VSC에서 파일 수정 -README.md에 적힌 내용은 삭제해도 됨. 자유롭게 수정 가능. 보통 app의 이름이나 설명을 적어준다. 더보기 # Movie_app_2020 react fundamental courses. -package.json에서 scripts에 start..
-
리액트 네이티브 VS 플러터Web/React 2019. 11. 19. 14:24
리액트 네이티브 VS 플러터 리액트 네이티브(함수형) 페이스북이 만듬, 플러터에 비해 지원이 적고 오픈소스 프로젝트임 페이스북도 리액트 네이티브에 100% 의존하지 않음 뭔가 필요하면 외부에서 가져와야함 호스트의 규칙을 존중함 자바스크립트 (npm 패키지) 이용가능 버그가 많음 플러터(객체지향) 구글이 만듬, 지원이 어마무시함, 모든 걸 그 안에서 제공하려고 함. 네이게이션, 카메라, 아이콘, 애니메이션, 트랜지션 등이 이미 다 갖춰져있음. 올인하다가 서비스를 갑자기 종료하기도 함 구글의 규칙이 강하게 나타난다. 그걸 없애는데 시간이 걸림. Dart가 슈퍼 객체지향 구글이 정리를 아주 잘해놨음(영상으로도 잘 설명되어있음) 버그가 거의 없고 모든 것이 스무쓰함 리액트 네이티브에서 쉬운 것은 어렵고 리액트 ..