일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- mongo
- 제로초예제
- 시퀄라이즈
- component
- sementicversion
- mongoose
- React Component
- express-generator
- node
- 리액트컴포넌트
- npm명령어
- 리액트스타디
- NoSQL
- MongoDB
- 시퀄라이즈공부
- sequelize
- nodejs교과서
- 리액트
- NPM
- 클래스컴포넌트
- nodeJS
- React
- 리액트기초
- Today
- Total
목록React/basic (28)
개발노트
함수형 컴포넌트에서도 state , ref를 쓸수있게 됨 함수형 컴포넌트에서의 state 사용은? //기존 클래스 컴포넌트의 state선언 부분 this.state={ firstNum : Math.ceil( Math.random() *9 ), secondNum : Math.ceil( Math.random() *9 ), value:'', result:'', } // 함수형 컴포넌트 const Gugudan = () =>{ // state를 선언하는 방법 const[ firstNum, setFirstNum ] = React.useState( Math.ceil(Math.randaom()*9 )); const[ secondNum, setSecondNum ] = React.useState( Math.ceil(Ma..
1. 변할 값들을 state로 만들어준다 2. 변할 값들 html 에다가 { this.state.blabla }로 넣어주고 3. 입력받는 값 중 input 일경우 onChange이벤트 발생시켜서 글자칠때마다 e.target.value로 사용자가 친 값들 받아와서 setState로 직접 input안의 value를 바꿔줘야 한다 4. 함수를 클래스안의 메서드로 빼서 { this.메서드이름 } 으로 연결하였다 guguCheck = (e) => { e.preventDefault(); if( parseInt(this.state.value) === this.state.firstNum*this.state.secondNum){ this.setState({ result: result:`${this.state.valu..
HTML 속성을 React로 표현하려면? 기존 HTML react component로 만들었을때의 button 부분 return makeTag( 'button', null , 'Like' ); HTML 리액트로 바꿀경우 null 자리 안에 속성(attrubute)들이 들어가게 되며 = csv가 : 으로바뀐다 return makeTag( 'button', { onClick: ()=>{ console.log('clocked'); }, type:'submit' }, 'Like' ); State 상태는 바뀌는 부분 또는 바뀔수 있는 부분. 버튼 클릭시 좋아요를 true로 바꾸려면? this.state 를 추가해 liked 속성을 추가해서 기본값을 false로 두고 클릭시 function에 this.setStat..
1. makeTag라는 변수에 , React야 엘리먼트 만들어줘 해서 담음. 2. 클래스 컴포넌트를 만든다. -React.Component가 부모고 그걸 확장(extends)해서 부모 기능을 쓸수있게 하였음. -props를 인자로 받는 생성자에서 super로 부모 생성자를 호출하는이유는 부모클래스를 실행시켜주어야 되서 그런건가? 찾아봐야 겠다 2-1) 렌더 메서드 안에 이런 태그를 만들겠다라고 써줌 3. ReactDOM을 이용해 render(화면에그리겠다)해줘 위의LikeButton 클래스컴포넌트가 렌더링된다.