Suyeon BLOG

출처: 노마드코더 - React JS로 영화 웹 서비스 만들기 1. VSC 의 TERMINAL에 npm install react-router-dom 을 입력합니다. 2. 다운로드를 한 다음 코드를 Router별(스크린 별)로 나눠야 합니다. (ex: 1개 Router은 홈페이지 등...) 3. App.js에 React-route를 위한 import 합니다. import React from "react"; import "App.css"; import {HashRouter, Route} from "react-router-dom"; function App() { return ( ); } 1-1. BrowserRouter : 일반 url처럼 뒤에 /하고 입력합니다. ex) https://naver.com/ 1-..

출처: 노마드코더 - 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. 장점과 특징 - create-react-app을 사용하면 useState를 사용할 때 앞에 React.를 붙이지 않아도 됩니다. const [counter, setValue] = useState(); - 자바스크립트를 작성할 때는 {} 안에 작성해야 합니다. function App() { const [showing, setShowing] = useState(false); const onClick = () => setShowing((prev) => !prev); return ( {showing ? 'Show' : 'Hide'} ); }

출처: 노마드코더 - React JS로 영화 웹 서비스 만들기 ※ create-react-app을 사용하는 이유 1. 작업하기 훨씬 좋은 환경을 제공해줍니다. 2. 작업할 때 분할과 정복이 쉽기 때문입니다. (ex : css 파일의 모듈화) 1. src 폴더에 button.js 생성하기 - prop를 받는 컴포넌트를 생성합니다. - export default 컴포넌트이름 : App.js에서 해당 컴포넌트를 가져올 수 있도록 만들어줍니다. 2. App.js에 Button 컴포넌트 import 하기 - TERMIMAL에 npm run start를 입력하면 경고가 발생합니다. - 'Button' is defined but never used no-unused-vars - 위 경고는 Button을 import ..

출처: 노마드코더 - 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에 만든 폴더를 추가하면 됩니다. (철자가 틀려서 실행이 안되었던 것이었습니다. 여러분들도 조심하세요.) - ..

PropTypes - prop에 잘못된 값을 입력했을 때, 사용자에게 잘못했다는 것을 알려줄 수 있습니다. - isRequired : 값을 입력해야만할 때 사용합니다. - 단, TypeScript를 사용한다면 이것을 사용하지 않아도 됩니다. import propTypes from 'prop-types'; function Btn({text, changeValue, fontSize}) { return {text} } Btn.propTypes = { text: propTypes.string, fontSize: propTypes.number, } function App() { let [value, setValue] = React.useState('Save Control'); const changeValue = ..

#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..