Suyeon BLOG

출처: 노마드코더 - React JS로 영화 웹 서비스 만들기 프로젝트 흐름 1. 처음 시작할 때 '로딩 메시지'가 화면에 출력됩니다. 2. '로딩 메시지'를 숨기고 코인 리스트를 나열합니다. - 암호화폐 리스트 출처 : https://api.coinpaprika.com/v1/tickers 주의할 점 1. useEffect로 API 한 번만 가져옵니다. 2. useState() 초기값을 안정해주면 undefined로 되고, undefined는 길이(length)를 가지고 있지 않습니다. import { useState, useEffect } from "react"; function App() { const [loading, setLoading] = useState(true); const [coins, s..

출처: 노마드코더 - React JS로 영화 웹 서비스 만들기 import { useState, useEffect } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { return; } setToDos((currentArray) => [toDo, ...currentArray]); setToDo(""); }; console.log(to..

1. useEffect(ar1, ar2) - compenent 안에서 특정 데이터가 변경되었을 때만 실행시키고 싶을 때 사용합니다. - ar1: 우리가 딱 한 번만 실행시키고 싶은 함수 - ar2: 변경된 값을 출력해줍니다. 이때 값을 [] 안에 1개 이상 넣을 수 있습니다. import {useState, useEffect} from react; //... const [keyword, setKeyword] = useState(''); const onChange = (event) => setKeyword( console.log(event.target.value); ); useEffect(()=>{ console.log('Search for', keyword); }, []); - 위 코드는 []에 아무것도..

출처: 노마드코더 - React JS로 영화 웹 서비스 만들기 1. nodejs를 다운받은 후, cmd창에 node -v 와 npx 입력하기 - 이때 npm이 존재한다면, npm install npx -g 를 입력해서 npx를 다운받습니다. - 다운받으면 업데이트하라고 권장하지만 안해도 됩니다. - 다음 git을 다운받습니다. (여기서 다운 받으면 됩니다. https://git-scm.com/downloads) 2. cmd창에 npx create-react-app 생성할파일명작성 입력하기 3. 다운 후, 만든 폴더 바로 실행하고 VSC(Visual Studio Code) 열기 - workspace에 만든 폴더를 추가하면 됩니다. (철자가 틀려서 실행이 안되었던 것이었습니다. 여러분들도 조심하세요.) - ..

#1. 숫자 1씩 증가시키기 function App() { const [counter, setCounter] = React.useState(0); const onClick = () => { //setCounter(count + 1); //현재 state 값으로 다음 state 값을 계산하고 싶다면 아래가 더 안전하다. setCounter((current) => current + 1); }; return ( Total clicks: {counter} Click ); } React.render(, 넣을 곳); - setCounter은 counter += 1, React.render(, 넣을 곳) 역할을 동시에 해줍니다. #2. 분을 시간으로 바꾸기 function App() { let [minutes, se..

출처 : 노마드코더 - ReactJS로 영화 웹 서비스 만들기 JSX 란 - JavaScript를 확장한 문법입니다. - 모습은 HTML과 유사합니다. 그래서 JSX로 React 요소를 만드는 게 개발자들 입장에서 굉장히 편합니다. - React.createElement() 는 많이 사용하지 않는 편입니다. 봤을 때 JSX보다 이해하기 어렵기 때문입니다. - JSX의 변수는 대문자로 시작합니다. 소문자로 적어서 HTML의 태그와 헷갈리면 안 되기 때문입니다. //React로 작성 React.createElement( 'h3', {id: 'title', onClick: ()=>{console.log('Click!')}, 'Title' ); //JSX로 작성 const Title = ( {console.lo..

출처 : 노마드코더 - ReactJS로 영화 웹 서비스 만들기 - React를 왜 배워야 하는지, 여기에 노력과 시간을 투자해도 안전한지 알아봅시다. - 무언가를 배울 때 시간이 가장 중요합니다. 만약 2달을 공부했는데 그게 1년 뒤에 사라진 것과, 2달 공부했는데 5-7년 동안 사용되는 것 중 무엇이 더 효율적인가 하면 후자가 정답입니다. 1. React JS를 누가 사용하는가, 규모가 얼마나 큰가 https://trends.builtwith.com/javascript/React - 상위 1만개의 웹사이트에서 44.76%는 React JS를 사용합니다. (위 링크를 통해서 확인할 수 있습니다.) (상위 웹사이트 : 에어비엔비, 인스타그램, 페이스북, 넷플릭스 등) - React JS가 웹사이트를 돌리고..