SMALL 🖊️Programming Language/📌React15 [React] Create 기능 구현 - mode 변경 & form & onSubmit Study. React Create 기능 구현 [create 기능 구현: mode 변경] 📌안에 onChangeMode 함수(핸들러) 추가 📌핸들러: 이벤트가 호출되었을 때 실행되어야 하는 함수 📌클릭하면 mode가 해당하는 값에 따라 바뀜 📌App.js 📌Control.js(Subject.js에서 파일이름 변경) import React, { Component } from 'react'; class Control extends Component { render() { console.log('Subject render'); return ( ); } } export default Control; 📌그러면 create, update, delete를 눌렀을 때 개발자 도구 페이지에서의 mode가 바뀌는 것을 알.. 2021. 5. 9. [React] Create 기능 구현 Study. React Create 기능 구현 [create 기능 구현: 소개] 📌Create Read Update Delete 📌페이지에 create, update, delete 기능 추가 📌create를 누르면 목록과 내용을 새롭게 작성할 수 있는 input 박스와 submit 버튼이 생성 📌update를 누르면 create에서 작성했던 title, desc가 목록에 새롭게 업데이트 📌delete를 누르면 목록이 삭제 💡그리고 몇 일전에 내 파일에서는 HTML, CSS, JavaScript 이 부분을 눌러도 내용이 알맞게 바뀌지 않았는데 알고보니까 목록을 누르면 자동으로 내용이 나오도록 하려고 App.js에 반복문을 추가했는데 그 전에 만들어둔 코드(아래 코드)를 지우지 않아서 계속 한 가지만 로드되.. 2021. 5. 7. [React] Props와 State Study. React Create 기능 구현 [베이스 캠프] 📌컴포넌트 안에서 자신에게 전달된 props 값을 바꾸는 것은 금지이고 props 밖에서 값을 바꾸는 것은 허용 📌내부적으로 필요한 데이터나 상태는 state를 통해 관리 📌props와 state 이 둘은 render라는 함수의 호출을 유발하기 때문에 이 값들을 바꾸는 작업 하려면 props와 state를 적당히 바꿔주면 됨 📌asynchronous: 비동기 📌state는 내부적&사용자, props는 외부적&구현자로 사용 📌컴포넌트는 props와 state의 영향에 따라 움직이는데 그 상태가 실제 웹 브라우저(dom)에 영향을 줌 📌Without recux를 보면 위쪽에 있는 회색 동그라미(WEB)가 아래쪽 회색 동그라미(Content, su.. 2021. 5. 6. [React] 이벤트 Study. React 이벤트 [이벤트 state props 그리고 render 함수] 📌이벤트는 props, state, 이벤트 이 세 가지가 서로 상호작용하며 애플리케이션의 역동성을 형성 📌WEB에 링크를 걸면 본문에 Welcome 메세지가 나옴 📌Subject를 클릭하면 그것에 해당하는 것들이 나옴 📌링크를 클릭하면 App컴포넌트에 state가 바뀌고 그 바뀐 state가 content 컴포넌트의 props 값으로 전달 📌mode: 사용자가 보고 있는 페이지가 Welcome페이지 인지 읽기 페이지 인지 구분 📌App.js this.state = { mode:'welcome', subject:{title:'WEB', sub:'World Wide Web!'}, welcom:{title:'Welcome'.. 2021. 5. 5. [React] State Study. React State [State 소개] 📌state와 props의 차이점 ex) 휴대폰을 사용자의 입장과 구현하는 입장으로 생각할 때 사용자의 입장: 휴대폰 버튼들 ➠ props 구현하는 사람의 입장: 내부 구현에 필요한 데이터 ➠ state 📌props는 사용자에게 제공하는 외부이고 사용자가 알 필요 없는 내부에서 사용되는 것이 state [State 사용] 📌App.js파일에서 아래와 같이 작성 📌state값을 초기화하여 그 값으로 title="WEB" sub="world wide web"에 들어가는 값을 세팅 📌Component가 실행될 때 render() 함수보다 먼저 실행되어 초기화시켜주고 싶은 코드를 component의 constructor안에 작성 📌아래 코드처럼 세팅 clas.. 2021. 5. 4. [React] 컴포넌트 제작 Study. React 컴포넌트 제작 [React Developer Tools] 📌질문하고 검색하는 것을 스스로 하는 것이 중요함 📢React 홈페이지 버전을 16.8로 맞춰야 함 📎React Developer Tools 바로 가기 링크: chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 2a7bb41548 on 4/28/2021. chrome.google.com 📌위 툴을 사용해서 관리자 모드로 들어가.. 2021. 5. 4. 이전 1 2 3 다음
