whatisthis?

React JS - Movie App project (part 2) { fet.." data-og-host="mywebproject.tistory.com" data-og-source-url="https://mywebproject.tistory.com/355" data-og-url="https://mywebproject.tistory.com/355" data-og-image="https://scrap.kakaocdn.ne.. mywebproject.tistory.com 🔺 지난시간 진행사항 - props 이용 - component 구분 (App.js / Movie.js / Home.js / Detail.js) - 디렉터리 구분 (components / route) 1/ 우선 React Router을 설치해..

React JS - Movie App project (part 1) React JS Movie App (part 1) step1. API fetch 하고 / loading창 만들기 import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); useEffect(() => { fet.. mywebproject.tistory.com 🔺 지난번 진행사항 - fetch(async-await 이용) API - Arr.map() 으로 각 요소 렌더링 지금까지의 코드 🔻 App.js import { useEffect, useState } from "react"; function App()..

React JS Movie App (part 1) step1. API fetch 하고 / loading창 만들기 import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); useEffect(() => { fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year` ) .then(response => response.json()) .then(json => console.log(json)); }, []); return {loading ? loading... : null}; } export defau..

Coin Tracker - 암호화폐와 그 가격을 나열함 - useEffect practice - 페이지 들어왔을 때 로딩메시지가 보이고, 코인들이 나열되면 로딩을 숨김. App.js import { useState } from "react"; function App() { const [loading, setLoading] = useState(true); return ( The Coins {loading ? Loading... : null} ); } export default App; API 가져오기 🔻 fetch("https://api.coinpaprika.com/v1/tickers"); API는 웹사이트 로드시 맨처음 한 번만 실행해야 하므로이전에 배웠던 useEffect를 사용하자. useEffect..

To Do List App - React JS 연습용 - create-react-app 사용 part1. 1 / 기본 틀 + 이벤트리스너 만들기 App.js import { useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const onChange = e => { setToDo(e.target.value); }; const onSubmit = e => {// form 제출시 e.preventDefault(); if (toDo === "") {// toDo가 공백이면 함수를 끝내버림 return; } setToDo("");// submit후 input의 value를 공백으로 }; return ( Add To Do..

참고 - 자주 사용하진 않는다. import { useState } from "react"; function App() { const [showing, setShowing] = useState(false); const onClick = () => { setShowing(prev => !prev); }; return ( {showing ? "Hide" : "Show"} ); } export default App; 자세한 설명은 이제 생략하겠음.. (단순 useState를 이용한 것) 이제 숨김 버튼을 만들었으니 숨길 대상(주로 다른 컴포넌트를 숨기고 나타낸다)을 만들어보자. function Hello() { return Hello; } 단순하게 h1 jsx를 리턴하는 Hello 컴포넌트를 만든 후 func..

React. React JS - Effects (1) React JS State Props Effects App.js const [counter, setValue] = useState(); import { useState } from "react"; 자동으로 import문이 생긴다. 이전처럼 React.useState()라고 안하고 그냥 useState()만 하면.. mywebproject.tistory.com 지난 포스팅의 내용에 이어서 진행됨. 📌 useEffect useEffect는 두개의 argument를 가지는 함수이다. arg1 > effect: EffectCallback (한번만 실행할 코드를 담은 콜백) arg2 > deps?DependencyList const [keyword, setKe..

React JS State Props Effects App.js const [counter, setValue] = useState(); import { useState } from "react"; 자동으로 import문이 생긴다. 이전처럼 React.useState()라고 안하고 그냥 useState()만 하면 된다! 여기에 이전에 배웠던대로 onClick함수를 만들어 버튼의 onClick prop에 연결해주자. 🔻 App.js 전체코드 import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue(prev => prev + 1); return ( ..

우선, 버튼에 해당하는 컴포넌트를 담은 Button.js를 만듬 >> 각각의 컴포넌트를 하나의 js파일로 따로 관리! Button.js function Button({ text }) { return {text}; } export default Button; App.js 수정 - import Button - Button 사용 App.js import Button from "./Button"; function App() { return ( Welcome back! ); } export default App; ** prop-types 패키지 설치 🔻 터미널창에 아래와 같이 입력 npm i prop-types Button.js import PropTypes from "prop-types"; function Bu..

create-react-app 가장 먼저 할 것은 node js의 설치이다. Node. Node Js + NPM 이란? Node.js는 자바스크립트를 브라우저 외의 다른 환경에서도 사용할 수 있게 해주는 런타임입니다. http서버가 내장되어 있기 때문에 보통은 서버로 많이 사용합니다. 하지만 응용 프로그램을 실행 mywebproject.tistory.com node js 설치 + npm이란 무엇인지에 대해 위 포스팅에 정리했었다. node가 잘 설치되었다면, cmd창을 열어 npx create-react-app (프로젝트app이름)을 입력한다. npx create-react-app project 설치가 완료되었으면 (Happy hacking!이라 뜸) 해당 디렉터리에 들어가보자. 위와 같이 package..