- Props 1)Props보낼 떄 다양한 자료 입력이 가능하다. 그리고 직접 데이터 입력도 가능하다. //혹은 배열등 다 가능 // data="문자자료" // :data="숫자자료: 그리고 : 유무에 따라 문자냐 숫자냐 자료형의 차이가 있다. 2)object자료형 한번에 보내거나, 각각 보내거나 둘다 가능하다. - custom event 1)props로 보낸 데이터는 수정하면 안된다. (Read-only) 2)부모컴포넌트의 데이터를 수정하고 싶으면 custom event를 쓴다. 부모에게 $emit('작명',데이터)을 써서 메세지를 보낸다. CardList.vue {{ oneroom.title }} ........ App.vue의 하위 컴포넌트인 CardList.vue에서 부모컴포넌트의 데이터를 수정하..

- Props 1)데이터는 한 곳에 보통 보관한다 (App.vue 같은곳) 그리고 필요하면 가져다 쓴다. 2)v-bind (축약은 :)를 이용해 이름 : "props할 데이터" 형식으로 넘겨준다. 3)props받은 컴포넌트쪽에 props등록을 해준다. 받은데이터이름 : 자료형인데 자료형은 디버깅용이라 틀려도 되지만 맞춰주도록 하자 ...... {{ a }} ....... export default { name: 'App', data(){ return{ modal : false, // 닫힌 상태와, 열린상태 2가지 표현 0과1로 혹은 true,false alert:[0,0,0], price1 : 60, price2 : 70, price3:80, prices:[60,70,80], 스타일 : 'color:bl..

- 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로 전송해준다. {찾..

- 변경 자주하는 내역들 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..

props로 자식에게 state전해주기 1. -> 보통 똑같이한다. 2.자식컴포넌트에서 props 파라미터 입력 후 사용 주요코드 function App() { ... let [글제목, 글제목변경] = useState(['서울','대구','대전','광주']) ... { modal === true ? // 작명 = {전송할state} 보통 똑같이 쓴다. : null } ... } function Modal(props){ //부모에서 전달받은 props는 여기 다 들어있다. return( 제목 {props.글제목[0]} 날짜 상세내용 ) } 전체코드 /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import {useState}..