state6 Vue(12) Vuex 란 (Vuex 설치하기) Vue.js 를 통해 수많은 변수를 만들고 로직들을 관리하며 프로젝트를 구성해나가다 보면 변수들을 어떻게 관리하느냐가 프로젝트의 효율성을 높이는 중점이 된다. 변수에는, 컴포넌트 내에서만 쓰이는 변수(지역변수)와 전체적으로 공용되는 변수(전역변수)가 있다. 전역 변수의 경우, 컴포넌트마다 일일이 선언해서 사용한다면 중복이 많아지고 자원의 낭비도 심할 것이다. 그래서 Vuex 와 같은 전역변수를 한곳에 모아 한방에 관리해주는 라이브러리를 사용한다. Vuex 란 Vuex는 Vue에서 사용하는 ‘상태 관리 패턴’ 라이브러리 이다. 앱의 모든 구성 요소에서 액세스할 수 있는 중앙 집중식 데이터 저장소를 만들 수 있다. Vue.js만 사용할 경우 데이터를 주고 받기 위해 상위 컴포넌트와 하위 컴포넌트가 지속적으로.. 2021. 8. 16. React(15) Create 구현 : onSubmit이벤트 & contents변경 최종 목표 create 기능 구현하기 create 링크 클릭시 화면하단에 create 섹션과 입력폼이 생긴다. 내용 입력 후 submit 버튼을 누르면 화면에 입력한 내용이 담긴 링크(원소)가 추가되는 이벤트가 발생한다. create에 내용을 입력 후 submit 버튼을 누르면 해당링크가 생성되고 링크를 누르면 내용이 출력됨 자 최종목표 도달을 위해 한단계씩 시작해보자 1. CRUD버튼 클릭시 모드가 변경 2. Create버튼 클릭시 모드가 변경되며 입력창이 생성 3. Create버튼 클릭시 모드가 변경되며 입력창이 생성되며 입력한 내용이 담긴 링크를 화면에 추가 2. create 구현 : onSubmit 이벤트 → 컨텐츠 리스트의 맨 끝에 서밋한 데이터를 추가하기 App.js - this.max_con.. 2021. 1. 7. React(14) Create 구현 : 모드 전환 & form 생성 최종 목표 create 기능 구현하기 create 링크 클릭시 화면하단에 create 섹션과 입력폼이 생긴다. 내용 입력 후 submit 버튼을 누르면 화면에 입력한 내용이 담긴 링크(원소)가 추가되는 이벤트가 발생한다. 자 최종목표 도달을 위해 한단계씩 시작해보자 1. CRUD버튼 클릭시 모드가 변경 2. Create버튼 클릭시 모드가 변경되며 입력창이 생성 3. Create버튼 클릭시 모드가 변경되며 입력창이 생성되며 입력한 내용이 담긴 링크를 화면에 추가 2. create 구현 : 모드 전환 & form 생성 create 버튼을 눌렀을 때 이 생성되며 내용이 출력된다. App.js - render( )안에 if문에 따라 각 모드에서 실행될 _article = 태그 내용을 각각 넣어주기 - retur.. 2021. 1. 6. React(13) Create구현 : 모드 변경 "상위 컴포넌트가 → 하위로 값을 전달할때 props로 전달하고 하위가 → 상위로 명령을 전달할때는 event로 전달한다." 최종 목표 create 기능 구현하기 create 링크 클릭시 화면하단에 create 섹션과 입력폼이 생긴다. 내용 입력 후 submit 버튼을 누르면 화면에 입력한 내용이 담긴 링크(원소)가 추가되는 이벤트가 발생한다. 자 최종목표 도달을 위해 한단계씩 시작해보자 1. CRUD버튼 클릭시 모드가 변경 2. Create버튼 클릭시 모드가 변경되며 입력창이 생성 3. Create버튼 클릭시 모드가 변경되며 입력창이 생성되며 입력한 내용이 담긴 링크를 화면에 추가 1. create구현 : 클릭시 mode라는 state값이 달라짐 App.js 1. 이라는 사용자 정의 태그를 만든다. 2.. 2021. 1. 6. React(10) 이벤트 만들기 (bind, setState) 오늘할일 - props & state & event 이용해 WEB 링크를 클릭하면 welcome모드가 나오도록 만들기 Subject.js - 타이틀에 링크걸기 **코드보기(복사용 첨부 / 더보기클릭) 더보기 import React, { Component } from 'react'; class Subject extends Component { render() { console.log('Subject render'); return( {this.props.title} {this.props.sub} ); } } export default Subject; App.js - state 추가하기 "state를 바꾸면 js가 다시 실행되며 웹페이지가 리로드된다. 모든 js파일의 render함수가 다 실행됨. 다시 말하면.. 2021. 1. 4. React(9) State로 내용구현하기 props가 사용자가 직접 component를 만날수있는 최전방이라면, state는 컴포넌트 내부에서 관리되는 내용이다. (사용자가 알필요도 없고 만날일도 없다.) props와 state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리해서 양 쪽이 각자의 자리에서 역할을 하게 만드는 것이다. 오늘할일 - App 클래스의 하위 컴포넌트인 와 의 props와 state를 나누어 보자 App.js 1. constructor()를 선언한다. 컴포넌트가 실행될 때 constructor 함수가 제일 먼저 실행되어 state를 미리 기억해놓는다. 2. 뒤이어 바로 render()의 내용을 변경해준다. 요런형식으로 state가 들어갈 구멍을 뚫어놓는다. 하드코딩할때 쓰는 props=" " 대신에 stat.. 2021. 1. 2. 이전 1 다음 반응형
