본문 바로가기

분류 전체보기26

7. Vue js - Component ㅁ Component 긴 HTML을 한 단어로 줄일수 있는 문법 ㅇ App.vue - 너무 많은 HTML이 있으면 가독성이 떨어짐 - 각각 Component 만들어서 관리함, 소스수정에 용이함 - 모듈 2021. 5. 27.
6. Vue js - 데이터 가져오기 내보내기(import / export) - feat v-for ㅁ 데이터 가져오기 내보내기 ㅇ 사용용도 > 데이터(값, 이름, 기타 드럼 등등)를 가져와서 화면에 뿌링글 할때 사용함 ㅇ 데이터파일 만들기 assets 폴더 하위 data.js ㅇ 데이터 내용은 아래와 같습니다. ㅇ 데이터는 오브젝트 형식으로 만들어짐 [ 값, export default [ { id : 0, title: "0번 데이터 입니다.", content: "0번 데이터 입니다.", }, { id : 1, title: "1번 데이터 입니다.", content: "1번 데이터 입니다.", }, { id : 2, title: "2번 데이터 입니다.", content: "2번 데이터 입니다.", }, { id : 3, title: "3번 데이터 입니다.", content: "3번 데이터 입니다.", }.. 2021. 5. 27.
5. Vue js - v-if(조건식) ㅁ v-if 사용예 ㅇ 기능설명 : 클릭 했을때 모달창 보여주고 클릭했을때 모달창 닫기 상세 페이지 상세 페이지 내용 현재상태저장데이터 : true, // 1. v-if 상태 저장 데이터 o, 1 or ture, false v-if="현재상태저장데이터 == true" 면 보이고 false 면 안보임 오ㅐ? 현재상태저장데이터 : true, 의 조건이 맞아야 보임, false 면 처음 저장해둔 상태값과 다르기 때문에 안보임 ㅇㅋ? ㅁ 응용 모달창 열고 닫기 상세 페이지 상세 페이지 내용 닫기 모달창 열기 ㅁ 결론 현재 저장된 상태값만 변경하면 동작함 2021. 5. 27.
6. React - props(속성값) ㅁ props는 propertis 약자로 속성값 전달 1. App.js - props 보내는곳 import './App.css'; import Hello from './component/Hello'; // Hello component 추가 function App() { return ( ); } export default App; 2. Hello.js - props 받는곳 export default function Hello(props){ console.log(props); return( {props.age} ); } 3. Hello.js - props 받는곳 export default function Hello({ age }){ return( {age} ); } ㅁ props 값 변경하기 ㅇ App.js.. 2021. 5. 18.

티스토리툴바