본문 바로가기
반응형

React44

React Router 이와같은 창에서 각 상품별로 상세페이지를 이동할때 라우팅을 사용하면 매우좋다. 부드럽게 작동하기도하고 별도의 페이지를 만들기보다 컴포넌트 형태로 이동할 수 있다. 리액트 라우터를 사용하려면 설치부터해야한다! npm install react-router-dom@5 yarn add react-router-dom@5 둘중 하나 사용해주면된다, 구글 검색하면서 세팅하도록하자 그리고 index.js에서 아래와같이 세팅해줘야함 import { BrowserRouter } from 'react-router-dom' // 이거 하나를 불러와 줘야한다. /같은 경로없이 불러오는건 라이브러리다. // import { HashRouter } from 'react-router-dom' // 이와같이해도된다. 이건 주소에 #기.. 2022. 1. 13.
React 컴포넌트화(Component) 해서 반복문이용, 이미지도 순서반복 위와같은결과물을 만들기위해 간단한 부트스트랩사용이후 상품 정보에관한 소스를 컴포넌트화해 반복문으로 출력했다. export default [ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in Seoul", price : 110000 }, { id : 2, title : "Grey Yordan", content : "Born in the States", price : 130000 } ] 이게 데이터정보 import Data from './data.js' function App() { let [shoes,shoes변경] = u.. 2022. 1. 12.
React import,export 활용하기 (코드 쪼개기) 파일이 점점많아진다, 언제까지 App.js하나에서만 코드를 관리할 수는 없다. 데이터를 외부에서 불러올 수도있고 많은 변수를 선언할 수도있고 수많은 함수가 생길 수 도 있음 여튼 import,export를 활용해서 가독성과 코드쪼개기를 할 수 있다. 1.변수하나 import,export해오기 var name = 'Kimjiwon' export default name 이와같이 내보내구 import name from './data.js' 이와같이 불러온다. `import 작명 from 경로`의 형태 2.변수두개이상 import,export해오기 var name = 'Kimjiwon' var name2 = 'jiwonman' export {name,name2} 이렇게 내보내구 import {name,name2.. 2022. 1. 12.
React Bootstrap 응용 -일단 추가 tip src에 넣은 파일은 파일면변경 + 압축됨 public에 넣은 파일은 보존됨 public에 있는 파일은 절대경로/파일명.jpg라고 다써야함 src에넣어서 바로사용하면 편하긴함 `./background.jpg` 이런식으로 https://react-bootstrap.netlify.app/getting-started/introduction 그리고 설치해서도 쓸 수 있지만 CDN불러와서 사용 할 수 도 있다. public/index.html 에다가! import logo from './logo.svg'; import './App.css'; import { Button,Navbar,Container,Nav,NavDropdown,Carousel } from 'react-bootstrap'; 이와.. 2022. 1. 12.
React Bootstrap사용하기(부트스트랩) npx create-react-app shop 명령어처서 새로운 프로젝트 만들어준다. 참고)yarn이라는걸 쓰면 정말좋다. https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com 터미널을 열어서 설치해 주도록하자 yarn을 설치하고나면 add같은걸 사용해서 npm대신 설치 할 수 도 있다. 여튼 부트스트랩을 사용하러가보자 react를 사용하면 react부트스트랩을 사용하면된다. 같은거긴함 https://react-bootstrap.github.io/ 이와같이 설치완료한다. 프로젝트내에서 vs코드를열어 설치해줘도 .. 2022. 1. 10.
React input 리액트에서 input창을 만들고싶다, 그리고 입력하고싶다 간단하게 해보자. 이와같이만 해줘도 인풋창이 생긴다! 지금은 인풋창에다가 글자를 입력해서 맨위에 추가하는 기능을 만들고싶다. 두가지를 해야한다 input창에서 onChange이벤트를주고 button에서 onClick이벤트를 줘야한다. let [글발행,글발행변경] = useState(''); 이와같은형태로 let[a,b] =useState()를 사용해준다. 문자열 형태로 state를 사용해줘서 input 창에서 입력 event가 발생할때마다 a에 저장이된다. 그리고 최종적으로 버튼을 클릭하면 맨위에 변경함수를 다시 사용해 deepcopy를 이용해 배열을 복사후 unshift로 추가해서 새로 추가해주는 형식을 사용한다. {글발행} {글발행변경(e.ta.. 2022. 1. 10.
반응형

티스토리툴바