웹공부/React (13) 썸네일형 리스트형 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 공부 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 2 다음
