Develop record

Route - 페이지 단위를 나눌 때 사용 (routes 폴더에 각 페이지를 만들어 export -> App.js 에서 import 해서 사용) nested route - 같은 카테고리 안에서 세분화되는 내용들을 담음 (components 폴더로 분류해서 저장) App.js import logo from './logo.svg'; import './App.css'; import {Button, Navbar, Container, Nav, Col, Row} from 'react-bootstrap' import img from './img/react-img.png'; import { useState } from 'react'; import data from './data.js'; import Main from ..

js 파일 만들어 export -> app.js 에서 import 해서 사용하기 상품 설명 컴포넌트로 만들어 페이지에 출력 import logo from './logo.svg'; import './App.css'; import {Button, Navbar, Container, Nav, Col, Row} from 'react-bootstrap' import img from './img/react-img.png'; // import 변수 from '이미지경로'; import { useState } from 'react'; import data from './data.js'; //export 한것 사용하기 import 변수명 from '경로'; => import 여러개 import {변수명} from '경로(..

1. component 만들기 constructor(){ super() } render(){ return( 축약할 html 작성) } class Modal extends React.Component{ constructor(){ super() } render(){ return( 안녕 ) } } 2. state 만들기 1. this.state 라는 변수만들기 2. this.state = { 자료이름 : 자료값 -> object 형식으로 state 나열 } 3. this.state.state이름 으로 state 사용 class Modal2 extends React.Component { constructor(){ super(); this.state = { name : 'kim', age : 20 } } rend..

import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let [title, changeTitle] = useState(['남자코트 추천', '강남 맛집 추천', '국내 여행지 추천']) let [date, changeDate] = useState('2월 17일 발행') let [cnt, plusCnt] = useState([0,0,0]) let [modal, setModal] = useState(false); let [number, changeNumber] = useState(0); let [input입력, setinput입력] = useState(''); const del =..

import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let [title, changeTitle] = useState(['남자코트 추천', '강남 맛집 추천', '국내 여행지 추천']) let [date, changeDate] = useState('2월 17일 발행') let [cnt, plusCnt] = useState([0,0,0]) let [modal, setModal] = useState(false); let [number, changeNumber] = useState(0); [1,2,3].map(function(a){ //[]의 길이만큼 return 반복, a : ar..

부모 : App 자식 : Modal 다른 function 일 경우 변수 사용 불가 : state 사용 불가 App( 내에서 사용 할 경우 : 부모/자식 관계 -> 다른 컴포넌트 안에 있는 컴포넌트 : 자식컴포넌트 => 부모 컴포넌트의 state를 자식 컴포넌트로 전송가능 : props 문법사용 *부모-자식관계만 가능*) function(파라미터문법) -> 파라미터문법: 다양한 기능을 하는 함수를 만들 때 사용 state 를 여러 컴포넌트에서 사용 할 경우 : 가장 상위 컴포넌트에 만들어놔야함 ( Modal / App => App(부모) 에 만들기 ) 부모 -> 자식 state 전송하기 1. 2. function Modal(props){ => props 파라미터 등록 후 props.작명 사용 } impor..

map() : 똑같은 html이 반복적으로 출현할 때 for 문 대신 사용 -> { for문 사용 불가 } 모든 array + .map( 콜백함수 : ()안에 들어가는 모든 함수 ) array 의 길이 만큼 function(a,i){ => a : 파라미터 -> array 의 값을 하나씩 출력, i : index -> 0,1,2 ~~ 1. function 코드 반복 실행 2. return ~ => ~ 을 array 로 담음 } import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let [title, changeTitle] = useState(['남자코트 추천', '강남 맛집 추..

1. html css로 미리 디자인 완성 2. UI의 현재 상태를 state로 저장 3. state에 따라 UI가 어떻게 보일지 조건문 등으로 작성 html 내에서 조건문(if) 사용 원할 시 삼항연산자로 사용 { 안에 작성 } import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let [title, changeTitle] = useState(['남자코트 추천', '강남 맛집 추천', '국내 여행지 추천']) let [date, changeDate] = useState('2월 17일 발행') let [cnt, plusCnt] = useState(0) let [modal, se..

컴포넌트로 만들면 좋은 상황 1. 반복적인 html 축약할 때 2. 큰 페이지들 3. 자주변경되는 것들 => 단점 : state 가져다 쓸 때 문제발생 ( 다른 함수(function) 에 있는 변수를 마음대로 가져다 사용 불가) import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let [title, changeTitle] = useState(['남자코트 추천', '강남 맛집 추천', '국내 여행지 추천']) let [date, changeDate] = useState('2월 17일 발행') let [cnt, plusCnt] = useState(0) return ( React..

아래 teminal 창에 warning 없애기 : js 맨 상단에 /* eslint-disable */ 작성 or 필요 없는 import 지우기 state 변경 : {}안에서 하면 안됨 /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { // 방법 1 : 각각 변수로 저장 let [list1,funcList1] = useState('남자 코트 추천'); let [list2,funcList2] = useState('강남 우동맛집'); let [list3,funcList3] = useState('파이썬독학'); let [date, funcDa..