개인코딩개발공장

# react 라우터 설치npm install react-router-dom@6  index.js에서import { BrowserRouter } from 'react-router-dom';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( );저렇게 추가해주자.   app.js에서import { Routes, Route, Link } from 'react-router-dom';이렇게 Route라이브러리 임포트 해주고 detail} /> cart} /> 이렇게 Route태그에다가 path와 element를 넣어주면 element에 있는 태그가 해당..

# 데이터를 모듈화해서 react에서 쓰면 편하다.가뜩이나 react는 다 짬뽕되어있어서 복잡할텐데.. 이렇게쓰라고한다.사실 이건 뭐 js기초문법인데 react에서 적용할겸 써본다.  # 데이터를 따로 js파일을 만들어서 넣어줬다.파일 경로는 이렇게 생겼다.products.js를 app.js경로와 같은위치로 만들어줬다.여기 products.js에다가 어레이 자료로 상품정보를 넣어줄거다.//products.jsconst products = [ { id: 0, title: 'White and Black', content: 'Born in France', price: 120000, }, { id: 1, title: 'Red Knit', content: 'Born in..

## 이미지 파일 관리하기 # 기본적인 native html css에서 파일 갖다 쓰는법이런식으로 bg.png파일이 있으면.App { text-align: center; .main-bg { width: 100%; height: 300px; background-image: url('./bg.png'); background-size: cover; background-position: center; }}이렇게 css상으로 백그라운드로 박아줄 수 있음뭐 자주 썼던거니까..  # react에서 파일 import해서 쓰는 방법이렇게 image디렉토리안에 이미지를 넣고 react코드상에서 쓰려면 이런식으로 넣어주면 된다.참고로 style속성 html에다가 바로 갖다박으려면 카..

# intro난 부트스트랩을 엄청 많이 쓰니까 이것도 포스팅한다vue랑 조금 다르다.나중에 base만들때 쓰면 좋을듯.  # 부트스트랩 먼저 들어가줌 Introduction | React BootstrapLearn how to include React Bootstrap in your project.react-bootstrap.netlify.app # 부트스트랩 모듈 설치 npm install react-bootstrap bootstrap  # index.html head태그안에 스크립트 복붙 # app.js에 해당 컴포넌트 import  Buttons | React BootstrapUse Bootstrap’s custom button styles for actions in forms, dialogs, a..

# 시작하면서이전에 배운걸 복습겸 새로 다 짜봤고 뭐 디자인도 다르니 혼동을 안하길 바란다솔까말 이 블로그 나만 보는거라..뭐.. # 일단 이렇게 생겼다.인풋 태그에다가 onChange옵션을 달아주었고 그곳에 handleTitle함수를 지정해줬다. 예전에 vue를 사용할때는 input에다가 v-model을 사용했던것 같은데react의 방식이 조금 더 복잡한 듯 하다.컴포넌트는 비교적 쉬웠던만큼 데이터바인딩이나 인풋데이터값을 쓰는거는 더 어렵고 뭐 이런거겠지?근데 vue reactive도 갖다쓴거니 react도 이런 메서드가 있지않을까 쉽기도 하고..암튼 뭐 지금 배우는 입장에서는 아 그렇구나 하고 배울뿐  # 암튼 저게 뭐냐?handleTitle함수를 onChange에 넣어줬는데 저 함수는 아래와 같이 ..

# map사용하기 titleLists.map(() => { console.log(1); })해당 어레이에 있는 요소만큼 안에있는 콜백함수를 호출해달라 이거임  titleLists.map((data) => { console.log(JSON.stringify(data)); })어레이에 있는 각 데이터를 매개변수 첫번쨰로 받음. titleLists.map((data, index) => { console.log(index); });두번째 매개변수는 어레이에 있는거 요소별로 0부터 끝까지 인덱스로 받아옴. 참고로  console.log( titleLists.map((data, index) => { console.log(index); }), )..

#기초 컴포넌트 만들기 방법import React, { useState, useEffect } from 'react';import './App.css';function App() {}const Modal = () => { return ( 제목 내용이다아아아아아 );};export default App;이렇게 App이라는 함수와 동등한 위치에 Modal이라는 함수를 만들고html스트링을 return하게 만든다그럼 이 함수는 Modal이라는 컴포넌트가 된다. 이걸 App()함수가 return하는곳 원하는곳에 쑤셔넣으면 됨 이렇게 Modal컴포넌트가 나타나게 되었다.  # 중요한점컴포넌트는 무조껀 하나의 html태그를 return하게 만..

# vs코드 쓰면서 prettier가 안됐음.cntl+shift+p눌러서저기드가샘이거 code formatter으로 바꿔주샘..저장시 줄정렬이 안됐었음 ㅠㅠ   # warining메시지 없애기/* eslint-disable */import React, { useState, useEffect } from 'react';import './App.css';이렇게 eslint 안쓴다고 해주면 됨.    # 버튼기능 만들기 incrementLike(0)}>라이크이렇게 태그에 onClick넣어주면 됨. 함수에 파라미터가 있으면 저렇게 즉시실행함수로 써줘서 함수리터럴을 써줘야 오류 발생안함그냥 함수 호출해버리면 rerendering오류가 뜨더라.매개변수가 없다면 그냥 함수이름만 넣어주면 됨   # ..

# JSX란?function App() { let post = "강남우동맛집"; const [state, setstate] = useState("무찌안녕"); console.log("바보무찌"); return ( hello world {post} );}이렇게 js가 있는데 안에 html이 들어있음.컴포넌트 쏴주는식인데 정확히는 함수안에서는 JS문법으로 되니까 HTML을 그대로 쓰면 제대로 인식 못 할 수 있음.그래서 이 안에서 문법을 JSX로 만들었다고 함.예를들어 예약어인 class대신에 className으로 한다는것..-기호를 쓰면 마이너스로 인식하니 안되고 카멜케이스 써야하는것 등등 있다.    # JSX에서 html 태그 자동완성이거땜에 코드짤때 짜증이 났는데.. ..

npx create-react-app 앱이름위 명령어로 프로젝트를 만들어주자.참고로 node js환경이 설치되어 있어야 한다.   Getting Started | Create React AppCreate React App is an officially supported way to create single-page Reactcreate-react-app.dev  리눅스 커널 상에서 해당 프로젝트 디렉토리로 이동한 후, npm start로 로컬서버에서 구동시켜주자. 3000번 포트에서 리액트 프로젝트 사이트가 떴다. # 대충 구조 파악하기난 이미 vue를 다뤄봤기에 spa프레임워크에 좀 적응이 되었는데 일단 딱보이는 다른점은 이 점이다.현재 리액트 프로젝트의 디렉토리 구조인데vue같은경우는 .vue라는 컴..