Web
-
<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..
-
flex && Array로 slide만들기(2)Web/JavaScript 2020. 1. 29. 04:07
☺️ 이전 글 flex && Array로 slide만들기(1) 내가 만든 슬라이드 : * .view-ver와 사진후보 array는 grid로 구분되어 있다. 사진 후보들인 .best-scene이 Array로 아래에 깔려 있고 사용자가 그 중 하나를 클릭(onclick)하면 해당 .best-scene의 background-.. humonnom.tistory.com html과 css 설정은 이전 글에서 다뤘고 이번 글에서는 js 설정만 다룬다. (1) div.viewVer의 현재 background-image를 구한다. (2) 현재 background-image 가 array에서 몇 번째 인지 확인하고 거기서 -1 해서 그 사진이 div.viewVer의 new background-image 가 되도록 한다...