일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 이벤트핸들링
- 컴포넌트
- frontendstudy
- CSS
- 리액트
- useState
- FrontendStydy
- this 객체
- promise
- DOM
- callback함수
- useRef
- 배열
- input
- 메소드 실행
- Frontend Study
- Props
- REACT
- addEventListener
- 렌더링
- 자바스크립트
- 비동기함수
- 이벤트
- 배열메소드
- 함수 실행
- JavaScript
- typeScript
- webProject
- try.. catch
- HTML
- Today
- Total
목록webProject (15)
이다닷
props App.js import React from 'react'; import Hello from './qoffhvjxm/Hello'; import Wrapper from './qoffhvjxm/Wrapper'; function App() { return ( ); } export default App; Hello.js import React from 'react'; function Hello({ color, name, isSpecial }) { return ( { isSpecial ? * : null } 안녕하세요 {name} ); } Hello.defaultProps = { name: '이름없음' } export default Hello; Wrapper.js import React from 're..
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..
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..