본문 바로가기
반응형

Component4

Vue.js 상세페이지(변수로 구분), 컴포넌트, v-if 추가학습 - 여러 상세페이지 변수로 조작하기 아래 그림과같이 상세페이지가 여러개 있을 수 도 있다. 라우팅과 비슷하다고 볼 수도 있는데, 주소/0, 주소/1 주소/2 와같이 되어있을 때 뒤에 변수 0,1,2만 바꿔주면 하나의 템플릿으로 여러 페이지의 데이터 내용을 구현할 수 있다. {{ oneroom[roomNumber].title }} {{ oneroom[roomNumber].content}} 닫기 {{ a }} {{ i }} {{ a.title }} {{ a.price }}원 ....... data(){ return{ modal : false, // 닫힌 상태와, 열린상태 2가지 표현 0과1로 혹은 true,false oneroom:data, roomNumber:0, //import 해온것 } 이와같이 dat.. 2023. 3. 30.
React Component중첩, props, state - Component중첩 컴포넌트1 > 컴포넌트2 > 컴포넌트3 이런식으로 있으면 중첩으로 props를 계속 전달해주면된다. 컴포넌트1에 있는 state를 컴포넌트3에서 쓰고싶다? 그리고 변경함수까지 전부 props->props로 계속 전달할 수 있다. 대체방식으로는 redux같은것이 있지만 우선 알아두자 이런식으로 컴포넌트 1에있는 재고를 컴포넌트3에서 관리한다고 생각해보자 컴포넌트1-> 컴포넌트2 로 props 컴포넌트2-> 컴포넌트3 으로 props하면 될것이다. let [재고,재고변경] = useState([10,11,12]) 첫번째에 컴포넌트에 선언된, 가장상위 App컴포넌트에 선언된자료 그 안에있는 두번째 컴포넌트 Detail에 state랑 state변경함수 둘다 props로 전송해준다. {찾.. 2022. 1. 15.
React props 추가 - 변경 자주하는 내역들 props로 전달하기 컴포넌트안에 props두개 전달 당연히 가능 { modal === true ? // 작명 = {전송할state} 보통 똑같이 쓴다. : null } - map함수 사용하면 첫번째 매개변수말고 index도 가지고 있다. { 글제목.map(function(글, i){ return( {/* 반복문이 돌때 안에 0,1,2가 반복되게 적기 map의 두번째 파라미터*/} { 누른제목변경(i)}} > {글} {따봉바꾸기(i)}}>🥰좋아요! {따봉[i]} {/* 따봉 함수로만들어서 파라매터 여기있는 i 전달해줘서 바꾸면 되겟다 체크 딥카피로 ㅇㅇ 해보쟈 */} 1월 10일 발행 ) }) } - props한 외부 컴포넌트 문법에서 사용하기 function Modal(prop.. 2022. 1. 10.
React Component 문법 div로 가득한걸 쉽게 볼 수있게 만들어 주는녀석이라고 알아보자 나만의 단어로 '치환'해서 만들 수 있음 -Component 만드는법 1.함수 만들고 이름짓고 2.축양을 원하는곳에html넣고 3.원하는곳에 4.이름은 대괄호 /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import {useState} from 'react' function App() { let [글제목, 글제목변경] = useState(['서울','대구','대전','광주']) let [따봉,따봉변경] = useState(0) let posts = "군자 훠궈 맛집" function 제목바꾸기(){ var newArray = [...글제목] newArray[.. 2022. 1. 9.
반응형

티스토리툴바