전체 글 (119) 썸네일형 리스트형 React 공부 7일차 라우팅이란? 웹 어플리케이션에서의 개념은 사용자가 요청한 url에 따라 알맞은 페이지를 보여주는 것이다. 블로그같이 여러 페이지로 구성된 웹 어플리케이션을 만들 때 각 페이지별로 컴포넌트들을 분리해가면서 관리하기 위해 필요하다. props는 object일 뿐이고, 사용자는 그걸 열어서 item을 꺼내 쓰는 것. component를 rendering하는 것은 함수를 불러오는 것. App.js에 "react-router-dom" import하기 function App(){ return ( {/* Switch는 Route(url)을 찾으면 component를 rendering함 */} {/* user가 movie path에 있으면, movie component를 보여줘라. */} ); } export defa.. React 공부 6일차 App.js import {useState, useEffect} from "react"; import Movie from './components/Movie'; //자식 component 파일 import 해주는 거 잊지 말기!! function App(){ const [loading, setLoading]=useState(true); const [movies, setMovies]=useState([]); const getMovies = async()=>{ const json = await(await fetch("https://yts.mx/api/v2/list_movies.json")).json(); setMovies(json.data.movies); setLoading(false); } useEffec.. React 공부 5일차 JSON이란? Java Script Object Notation = 자바 스크립트 객체 표기법 즉, 데이터를 쉽게 ' 교 환 '& ' 저 장 ' 하기 위한 텍스트 기반의 데이터 교환 표준 텍스트 기반, 다양한 프로그래밍 언어에서 data를 교환, 저장할 수 있다. 기본적으로 객체 형태 { key : value } 이며 number, string, boolean, object, arary, null등 다양한 타입의 자료형을 사용한다. 1) JSON.stringify(arg): 객체 ------>문자열 변환 2) JSON.parse(arg): 문자열 ------>객체 변환 (단, JSON.parse(arg) 사용 시 문자열이 반드시 JSON 형식이어야 함.) https://codingazua.tistory... React 공부 4일차 *복습: form은 기본적으로 submit이라는 event를 갖고있음. import {useState, useEffect} from "react"; function App(){ const[toDo, setToDo]=useState(""); //매번 입력받는 to-do list 항목 하나를 저장하는 state const [toDos, setToDos]=useState([]); //to-do list 전체 항목이 담긴 배열을 저장하는 state const onChange=(event)=>setToDo(event.target.value); const onSubmit=(event)=>{ event.preventDefault(); //form의 default event들을(ex) submit) 실행하지 않도록 막.. React 공부 3일차 *useEffect(arg1, []) 함수: 코드가 state 변화에 상관없이 딱 한번만 실행될 수 있도록 보호해줌. useEffect(arg1, arg2); arg1: 실행하고자 하는 코드 or 함수 arg2: ReactJS가 변화가 생겼나 계속 지켜보는 element useEffect(() => { console.log("CALL THE API...") },[]); import {useState, useEffect} from "react"; function App(){ const [counter, setValue] = useState(0); const onClick = () => setValue((prev)=>prev+1); //state가 변할 때마다 매번 실행 console.log("I RUN A.. React 초기 셋팅 Nomad 코더 React 입문 강의를 듣다 초기 Node.js npm 초기 셋팅에서 ERROR가 나 애를 먹었다. https://unknown-coding.tistory.com/21 [React 시작하기] _ 개발환경 설정(Visual Studio) 운영체제: window10 사용 IDE: Visual Studio 강의를 보면 물론 윈도우 버전에 대한 설명도 해주시지만 놓친건지... 아니면 제대로 설명을 안해준건지... 모르겠지만 잘 안되는 부분들이 몇가지 있었다. unknown-coding.tistory.com 이 블로그 가이드라인대로 따라했더니 오류가 해결되었다. 아, 그리고 작업 파일 이름을 React로 해서 만들면 안된다. 그래서 firstReact\react-app으로 바꿔주고 했더니 잘 설치.. React 공부 2일차 *component란 어떤 JSX를 반환하는 함수라고 생각하면 된다. -km miles -minutes hours -단위 변환에 필요한 flip 버튼 생성 -옵션 변경 위한 select 생성하기 -새롭게 배운 const [A , B] = React.useState()개념 사용 A: state값 B: state값 재설정하는 modifier useState에서 modifier함수를 실행하면 해당 component가 새로 rendering됨. DOCTYPE html> //flipped인 상태: hours를 입력받는 상태(!flipped = min을 입력받는 상태) function MinutesToHours(){ const [amount, setAmount]=React.useState(0); const [fli.. React 공부 1일차 *환경 설정 1) react, react-dom src script에 복붙해넣기 2) 개발자도구 - console창 가서 React 설치됐는지 확인(React치고 enter 눌러보기) DOCTYPE html> const root = document.getElementById("root"); //property(id, style, eventListener etc...)에서 바로 event 등록 가능 const h3 = React.createElement("h3", { //on+${event} onMouseEnter: () => console.log("mouse enter") }, "Hello, I am a span!"); //const name = React.createElement(html element.. 이전 1 ··· 11 12 13 14 15 다음
