reactjs13 [ReactJS] Practice To Do List - ReactJS 로 영화 웹 서비스 만들기 (7) 본격적으로 Movie App 을 만들기 전에 두 가지 실습을 진행한다. 첫 번째는 To Do List 만들기!! #7.0-7.1 Practice To Do List input 에 입력하는 값들의 list 를 보여주기 toDo, toDos 생성 const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); toDo : 현재 입력받는 값 toDos : 입력받은 toDo 들의 총 집합 화면에 그려지는 부분 return ( My To Dos ({toDos.length}) Add To Do { toDos.map((item, index) => ( {item} )) } ); h1 > 제목에는 toDos 의 길이도 함께 출력 form > in.. 2021. 12. 7. [ReactJS] Effect - ReactJS 로 영화 웹 서비스 만들기 (6) 이론의 마지막!! Effect #6. Effects ReactJS 는 우리 대신 자동으로 refresh 해줌 거기다 state 의 변화가 일어날 때만 refresh 함 이 때, 컴포넌트의 모든 코드들이 재실행 하지만 component 가 처음 render 될 때만 코드를 실행하고 싶거나 특정 state 가 변할 때만 실행하고 싶은 코드가 있을 수 있음 useEffect 를 이용하면 그것이 가능하다. 예시) import { useState, useEffect } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => .. 2021. 12. 2. [ReactJS] Create React App - ReactJS 로 영화 웹 서비스 만들기 (5) 본격적인 React 의 시작!! Create React App #5. Create React App Create React App 리액트 어플리케이션을 쉽게 만들 수 있게 해줌 많은 스크립트와 configuration 들이 도와줌 자동 새로고침, 즉각적인 CSS 포함 등의 기능 제공 CRA 실행 방법 1. nodeJS 설치 https://nodejs.org/en/ 에서 버전에 맞는 걸로 설치하기 2. nodeJS 설치 확인 cmd 에 node -v 실행 npx 도 확인 그럼 CRA 만들 준비 완료!! 3. Create-React-App 생성 cd C:\(사용할 폴더 주소) 명령어를 이용해 어플리케이션을 만들 폴더로 이동 npx create-react-app (사용할 app 이름) 자동으로 설치가 진행된다.. 2021. 11. 26. [ReactJS] Props - ReactJS 로 영화 웹 서비스 만들기 (4) 이번엔 props 를 이해하기 위해 버튼 컴포넌트를 이용한 실습을 해볼 것이다. #4. Props props 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법 자식 컴포넌트의 첫 번째이자 유일한 인자 (argument) 이다. text, boolean, function, ... 등 어떤 형태로든 보낼 수 있다. Practice - (1) 여러 개의 버튼 만들기 function SaveBtn() { return ( Save Changes ) } function ConfirmBtn() { return ( Confirm ) } function App() { return ( ); } const root = document.getElementById("root"); ReactDOM.rende.. 2021. 11. 26. [ReactJS] Unit Converter 완성 - ReactJS 로 영화 웹 서비스 만들기 (3) KmToMiles Converter 를 구현하고 여러 개의 Converter 중 선택한 Converter 만 보여지도록 할 것이다. 이건 개인 과제로 주어진 것인데 이전 강의를 잘 수강했다면 무리없이 구현할 수 있다!! Unit Converter 구현하기 - (1) 컴포넌트 분리 MinutesToHours 함수 생성 지금까지 구현한 코드는 MinutesToHours 라는 함수를 따로 만들어서 분리 KmToMiles 함수 생성 실제 기능 구현 전, 함수만 만들어 뒀다. App() select 를 이용해 Converter 를 선택할 수 있게 함 어떤 index 를 선택했는지에 따라 다른 컴포넌트를 보여준다. index 와 onSelect index : 선택된 값을 가짐 onSelect : 선택된 값 (eve.. 2021. 11. 25. [ReactJS] State - ReactJS 로 영화 웹 서비스 만들기 (2) 이번엔 state 가 뭔지 배우면서 분(minutes) 시(hours) unit converter 를 만들 것이다. #3. State State 와 useState state : 기본적으로 데이터가 저장되는 곳 useState 는 [value, modifier] 를 제공 value : 값을 저장하는 변수 modifier : value 값 변경이 가능하며 (직접 다시 render 할 필요 없이) 자동으로 re-render 해준다. MinutesToHours Converter 구현하기 - (1) state 이용 state 생성 초기값은 0 이며 setMinutes 로 값 변경이 가능하다. onChange 함수 생성 event 값을 arg 로 받아서 현재 입력된 input 값이 무엇인지 확인할 수 있다 = e.. 2021. 11. 25. 이전 1 2 3 다음
