영화/ReactJS (16) 썸네일형 리스트형 07. Practice Movie App - To Do List import logo from './logo.svg';import './App.css';import { useState } from 'react';function App() { const [toDo, setToDo] = useState(""); //setToDo는 toDo값을 수정하는 함수이고, toDo값은 input이랑 연결되어 있음 const [toDos, setToDos] = useState([]); const onChange = (evnet) => { setToDo(evnet.target.value); }; const onSubmit = (evnet)=>{ evnet.preventDefault(); if(toDo == ""){ return; }; s.. 06. Cleanup 05. useEffectuseEffect function은 코드가 한번만 실행될 수 있도록 보호해주는 것이다. useEffect(함수, [변수]); 위의 형태로 사용되는데 변수 값이 변화면 함수 내 코드가 작동한다!!!import logo from './logo.svg';//import 'bonsimony.tistory.com useEffect(() => { console.log("hi :)"); return () => { console.log("bye :("); }; }, []);useEffect(function(){ console.log("hi :("); return function(){ console.log("bye :)"); }; .. 05. useEffect useEffect function은 코드가 한번만 실행될 수 있도록 보호해주는 것이다. useEffect(함수, [변수]); 위의 형태로 사용되는데 변수 값이 변화면 함수 내 코드가 작동한다!!!import logo from './logo.svg';//import './App.css';//import Button from "./Button";//import styles from "./App.module.css";import { useEffect, useState } from 'react';function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = (.. 04. Tour of CRA 03. CREATE REACT APPCreate React App을 사용하지 않고 스크립트를 import함으로써 React를 구현할 수 있지만 Create React App를 사용하면 ReactJS 어플리케이션을 만들때 훨씬 쉽고 많은 사전 설정들을 준비해준다.즉, create-reactbonsimony.tistory.com 바로 앞 게시글에 "cd c:\" 명령어와 NPX(Node Package eXecutor) 를 활용하여 "npx create-react-app react-for-beginners" 명령어를 통해 C드라이브에 react-for-beginners 폴더를 생성하면서 어플리케이션이 생성되었다. 수정하기 전 소스와 수정 후 소스를 비교하여 수정한 내용을 확인하기 위해서 아래 소스를 첨.. 00. 리액트 Basic, State, Props 소스 첨부 ReactJS는 VanillaJS와 다르게 HTML 구성요소를 React 구성요소로 따로 만들어 사용한다.ReactDOM.render();를 사용하여 React 구성요소를 랜더링한다. ReactJS는 VanillaJS보다 코드가 복잡하지만 랜더링을 할때 큰 장점을 지니고 있다. VanillaJS를 사용할 경우 브라우저는 노드정보다 바뀔때마다 노드트리를 다시 생성하게 된다.그러나 ReactJS는 가상 DOM을 사용해 사용자가 보이는 부분마 수정해 일단 보여주고, 모든 업데이트가 끝난 후 전부 합쳐 실제 DOM에 전해준다. 03. CREATE REACT APP Create React App을 사용하지 않고 스크립트를 import함으로써 React를 구현할 수 있지만 Create React App를 사용하면 ReactJS 어플리케이션을 만들때 훨씬 쉽고 많은 사전 설정들을 준비해준다.즉, create-react-app을 사용해서 어플리케이션을 만들면개발 서버에 접근하거나 자동으로 새로고침을 시켜주거나즉각적으로 에플리케이션 안에 CSS를 포함시켜 준다든가 하는 기능들이 있다. 웹사이트를 public할 준비가 되면 Create React App은 public하는 명령어를 갖고 있다.코드를 압축하고 빠르게 만들어 주는 등 리액트 어플리케이션을 만들어야할 때 사용한다. 1. Node.js를 설치합니다. Node.js — Node.js® 다운로드 Node.js —.. 02. 리액트 - 샘플 웹앱 실행 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 위의 링크를 통해 마이크로소프트사에서 만든 Visual Studio Code를 다운로드한다. 다른 에디터를 사용해도 상관은 없다. Visual St.. 01. 리액트 - 설치 및 개발환경 세팅 https://ko.reactjs.org/ - 위의 링크를 클릭하면 리액트 홈페이지로 이동한다. - CodePen, CodeSandbox, Stackblitz 온라인 상에서 리액트 어플리케이션을 구현해볼 수 있는 사이트이다. - 부분적으로 React를 추가하고자 할때 해당 옵션을 사용한다. https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app 새로운 React 앱 만들기 – React A JavaScript library for building user interfaces ko.reactjs.org https://github.com/facebook/create-react-app GitHub - facebook/create-rea.. 이전 1 2 다음
