분류 전체보기 (38) 썸네일형 리스트형 [웹 FE 스터디] ReactJs 7 TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 40기_박지민 노마드 코더 - ReactJS로 영화 웹 서비스 만들기 ▶Todo 프로그램 예제 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, .. [웹 FE 스터디] 7 TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 40기_강한림 노마드 코더 - ReactJS로 영화 웹 서비스 만들기 수강 과정입니다. 7.0 지금까지 공부한 state, effect, props 등을 연습합니다. - 학습 목표 : to do list 를 만듭니다 더보기 1. 기본 상태 입니다. function App() { return ( ); } export default App; 2. input 값을 조정하기 위해서 useState()를 사용합니다. 또한, onChange function을 사용합니다. import { useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const.. [웹 FE 스터디] 리액트 토이프로젝트 | useState, useEffect, API, Router TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 38기_김민서 참고강의 : 노마드코더 이번주차는 #7에 해당하는 강의를 수강하였다. 앞서 배운내용을 기반으로 TodoList,Cointracker, 영화 웹사이트 같이 작은 토이프로젝트들을 만들어보는 강의였다. ToDoList 만들기 1. 뼈대 구성 My To Do List ({toDos.length}) Add To Do 우선 h1 제목아래에 todoList를 입력할수있는 input태그를 기반으로 입력을 받고, button을 이용하여 form 태그로 onSubmit 이벤트를 발생시키려고한다. 2. 기능구현 구현해야할 기능은 1. useState를 이용하여 input태그안에 입력된 값을 받아오고 2. button이 눌릴때 위의 .. [웹 FE 스터디] #7 PRACTICE MOVIE APP TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 38기_서다원 간단한 투두 앱부터 만들어보자 import logo from "./logo.svg"; import "./App.css"; import { useState, useEffect } from "react"; function App() { const [toDo, setToDo] = useState(""); // 입력할 toDo const [toDos, setTodos] = useState([]); //todo 들의 리스트 const onChange = (event) => setToDo(event.target.value); // 입력한 값이 toDo가 됨 const onSubmit = (event) => { //submi.. [웹 FE 스터디] ReactJs ~6.4 TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 40기_박지민 노마드 코더 - ReactJS로 영화 웹 서비스 만들기 ▶ 시간↔분 전환 프로그램 예제 - onChange의 기능 : input 태그의 이벤트를 감지. 값 변경 시 setAmount를 이용해 변경된 값을 state안에 삽입. 데이터 수정을 위해 modifier function (=setAmount) 이 사용되었기 때문에 그 함수를 사용할 때마다 컴포넌트는 새 데이터와 함께 새로고침 됨. * onChange = { onChange } 가 없을 경우 우변의 onChange prop에 담긴 modifier function이 작동하지 않는다. 이벤트 발생 시 수정된 값으로 업데이트 시켜주는 기능이 사라졌기 때문에 inp.. [웹 FE 스터디] 3.6~6.4 TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 40기_강한림 노마드 코더 - ReactJS로 영화 웹 서비스 만들기 수강 과정입니다. 5.0부터 진행하는 코딩중, 웹 사이트를 열고싶을때는, vscode의 터미널에서 'npm start'을 입력합니다. //폴더 찾아가서 index.html 열었는데 아무것도 안나와서 당황하지 않도록.. // 무언가 터미널에 뜨면 y 나 n을 누르면 잘 뜹니다. 3.6 - 지난 3챕터(3.0~3.5)의 복습 강의 입니다. 추가된 코드가 있어 작성합니다. - const onChange 아래에 reset 함수를 추가했습니다. - minutes와 같이 hours 또한 div로 묶고, minutes을 60으로 나눈뒤 반올림(round)하여 화면에 표기.. [웹 FE 스터디] ReactJS ~ 3.5 TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 40기_박지민 ref. 노마드 코더 React JS로 영화 웹서비스 만들기 ▶ReactJS 어플리케이션이 상호작용하기 쉽게 만들어주는 라이브러리 element를 업데이트 할 수 있어 유저에게 보여지는 내용, 즉 HTML을 업데이트 할 수 있다! *React-dom : React element를 HTML에 두는 역할. JS로 element를 만들어 역으로 HTML에 삽입시킨다. ∴ 앱 실행 시 소스를 보면 작성한 컴포넌트는 보이지 않음 ↓ React 사용을 위해 필요한 코드 ▶ReactJS로 element 생성 * 잘 쓰이지 않는 방식. ▶EventListner 바닐라JS에서 사용되는 event명 앞에 on을 붙여줘야 React.. [웹 FE 스터디] 리액트 시작하기(3) TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 38기_김민서 1.useState 사용하기 리뷰 const [ counter,setCounter] = React.useState(0); 위의 코드처럼 useState의 반환값 두개를 1.바꿔줄 변수 2.바꿔줄 변수를 다루는 함수 이름을 선언해줘서 사용한다. 여기서 setCounter와 같이 바꿔줄 변수를 다루는 함수는 크게 두가지 방식으로 사용한다 1. 인자로 변경될 내용 작성 setCounter(변수의 변경내용) 이런식으로 쓰는데 setCounter(10000)으로 정적인 데이터를 넣어주거나 setCounter(counter+1) 변수를 포함한 식으로 넣어줄수있다 2. 화살표 사용하기 setCounter((current)=>.. [웹 FE 스터디] REACT ~3.5 TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 40기_강한림 노마드 코더 - ReactJS로 영화 웹 서비스 만들기 수강 과정입니다. 2.1 react 없이 버튼을 얼마나 눌렀는지 알려주는 웹 사이트를 만듭니다. 방법으로는 1) HTML을 만듭니다. 2) JS에서 가져옵니다. 3) event를 감지합니다. 4) 데이터를 업데이트합니다. React를 사용하기 위해서는 위의 두줄의 코드를 작성해야 한다. 2.2 2.1에서 작성한 내용을 React JS로 다시 구현하는것이 목표입니다. HTML 코드를 직접 작성하지 않습니다. 대신, JS를 이용하여 이나 에 해당하는것을 만들것입니다. 이 영상에서 다루는 React JS로 element를 생성하는 방식은 잘 사용하지 않는 방식입니.. [웹 FE 스터디] THE BASICS OF REACT ~ 3.5 Inputs and State TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 38기_서다원 ref : 노마드코더 React JS로 영화 웹서비스 만들기 React의 동작방식 React는 js로 element를 만들어 이를 html 안에 넣는 역할 담당 컴포넌트를 작성해도 앱을 실행했을때 소스보기에서는 해당 컴포넌트 내용이 안보임( root div만 보임) 그래서 가상돔(virtual DOM)이라고 함 -> 리액트가 빠른 이유 Component란 html을 반환하는 함수 ex : Javascript랑 html이 조합된걸 JSX라고 함 대문자로 시작해야! Reusable Component with JSX + Props JSX랑 props를 사용하면 컴포넌트끼리 정보를 보낼 수 있다. (단, 부모 -> 자식.. 이전 1 2 3 4 다음
