일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- typeScript
- try.. catch
- callback함수
- addEventListener
- DOM
- this 객체
- 이벤트핸들링
- HTML
- 자바스크립트
- 렌더링
- 배열메소드
- frontendstudy
- CSS
- useState
- useRef
- 메소드 실행
- FrontendStydy
- 비동기함수
- promise
- 배열
- 이벤트
- 함수 실행
- Props
- input
- 리액트
- REACT
- 컴포넌트
- JavaScript
- Frontend Study
- webProject
- Today
- Total
목록리액트 (28)
이다닷
Contents 변경 concat 함수 사용 ➡️이러한 방법으로 사용할 수 있는 concat 함수를 사용하여 우리가 입력한 title과 description 값을 추가해 줄 수 있다. ➡️이와같이 push 함수를 사용해도 원소를 추가할 수는 있지만 concat과는 달리 원본이 변경된다. 따라서 concat의 방법을 사용하려고 한다. 📢push대신 concat를 사용하는 이유 -> push는 성능적인 부분에서 많이 떨어진다. App.js 추가내용 var _title, _desc, _article = null; if (this.state.mode === 'welcome') { _title = this.state.welcome.title; _desc = this.state.welcome.desc; _artic..
mode 변경 기능 App.js 추가내용 import Control from "./components/Control"; 추가된 components 하위 파일 Control.js import React, { Component } from 'react'; class Control extends Component { render() { return ( create update ); } } export default Control; ➡️각각 App.js와 Conreol에 내용을 추가함으로써 mode를 변경한다. mode 전환과 onSubmit 이벤트 ➡️create 버튼을 누르면 mode가 create로 바뀌고, ReadContent대신 CreateContent를 띄우면서 title과 description을 직..
컴포넌트 이벤트 만들기 📢페이지가 변경되었을때 이벤트를 실행시키는 이벤트 만들기 App.js import React, { Component } from 'react'; import TOC from "./components/TOC"; import Content from "./components/Content"; import Subject from "./components/Subject"; import './App.css'; class App extends Component { constructor(props) { super(props); this.state = { mode: 'read', subject: { title: 'WEB', sub: 'world wide web!' }, welcome: { titl..
event state props var _title, _desc = null; if(this.state.mode === 'welcome') { _title = this.state.welcome.title; _desc = this.state.welcome.desc; } else if (this.state.mode === 'read') { _title = this.state.contents[0].title; _desc = this.state.contents[0].desc; } ➡️render 함수 내에서 if 문을 사용하여 event를 발생 자동 event 설치 {this.state.subject.title} ➡️우리가 이런식으로 event를 주고, a태그를 클릭하면, a 태그의 특성상 페이지가 reroad..
state와 props의 차이점 Props component를 사용하는 사용자는 props를 문법적으로 제공받아서 component를 조작할 수 있게 된다. 📌따라서 props는 component 사용자에게 중요한 정보이다. State 📌반대로 state는 사용자가 몰라야하는 내부적으로 사용되는 것들을 모아놓은 것이다. ➡️➡️결과적으로 우리가 사용하는 component가 좋은 부품이 되기 위해서는 component를 사용하는 외부의 props와 그 props에 따라서 그 컴포넌트를 실제로 구현하는 내부의 state라는 정보가 철저하게 분리되어야 한다. constructor(props){ super(props);{ } } ➡️render() 함수 앞에 나오면서 props의 값을 초기화 해준다. const..
각 component를 각각 파일로 분리하는 방법 ➡️분리한 파일의 맨 위에는 항상 Component라는 클래스를 로딩해주는 코드를 작성해야 한다. ⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️ import React, { Component } from 'react'; ➡️component를 분리하기 위해서 만든 파일을 가져왔을때 외부에서 어떤 내용을 사용할 수 있게 할것인지 정해준다. 📌export default 클래스 이름; ex) export default TOC; ➡️각 component들을 불러와서 사용할 js 파일에서 각 component 파일을 가져와서 사용하려면 아래의 코드를 추가해준다. import 파일 이름 from "파일 경로"; ex) import TOC from "./componen..
props 이용법 {this.props.값의 이름} ex) {this.props.name} 결과 코드 import React, { Component } from 'react'; import './App.css'; class Subject extends Component { render() { return ( {this.props.title} {this.props.sub} ); } } class TOC extends Component { render() { return ( HTML CSS Javascript ); } } class Content extends Component { render() { return ( {this.props.title} {this.props.desc} ); } } class A..
본래 HTML 코드 WEB world wide web! HTML CSS Javascript HTML HTML is HyperText Markup Language. 컴포넌트를 만드는 방법 App.js 파일 내용 ➡️react라는 class 안에 있는 component를 가져와서 새로운 App라는 클래스에 상속해준다는 의미. ➡️그리고 그 component라는 class에는 render이라는 메소드를 가지고 있다. import React, { Component } from 'react'; import './App.css'; class App extends Component { render(){ return ( Hello, React!! ); } } export default App; HTML 코드를 reac..