일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
- javascript
- springboot
- 보안취약점
- 개발공부
- 자바스크립트
- java
- DATABASE
- 스프링부트
- 개발
- GIT
- Spring
- 컴포넌트
- React
- table
- EXTJS
- 데이터베이스
- 자바
- Vue
- 스프링
- mssql
- 리액트
- jdk
- reactjs
- JS
- 쿼리
- sql
- Intellij
- crud
- restapi
- component
- Today
- Total
목록리액트 (10)
준준의 기록일지
[React] JSON 형태로 입력 데이터 출력 JSON형태로 입력된 값들을 출력하기 위해서는 key, value값을 setState하고 JSON.stringify로 변환해줘야한다. 아래 코드를 보면 3가지 age, name, address로 input이 가능하고, form submit으로 값을 담아 window.alert로 뿌려줄 수 있다. 여기서 주의해야될 점은 input에 name을 지정해주지 않으면 this.age와 같은 값이 key값을 제대로 찾지 못한다. 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 31 32 33 import React, {Component} from 'react' export..
라이프사이클 : 어떤 객체가 생성부터 파괴되는 시점 사이에서 자동으로 호출되는 메서드들의 집합 컴포넌트 생성과 DOM에 마운트 - 컴포넌트가 생성되고, DOM에 마운트(추가)될 때 다음과 같은 순서로 메서드가 호출된다. 이러한 과정은 딱 한번만 반복된다 constructor(props) : 객체가 생성될 때 componentWillMount() : 컴포넌트가 DOM에 마운트되기 직전 render() : 컴포넌트가 렌더링될 때 componentDidMount() : 컴포넌트가 DOM에 마운트된 직후. 컴포넌트 업데이트 - 컴포넌트의 프로퍼티가 변경되면 다음과 같은 메서드가 호출된다. componentWillReceiveProps(nextProps) : 컴포넌트의 프로퍼티가 변경될 때, 새로운 속성을 받았을..
render : 어떤 Html을 그릴 것인가를 결정하는 함수. 리액트에서는 props나 state의 값이 바뀌면 해당되는 컴포넌트의 render함수가 호출되도록 약속되어 있다. - 즉 props나 state값이 바뀔때마다 화면이 다시 그려진다. debugger; : 만 해도 여기에 breakpoint가 걸림. {this.state.subject.title} 이부분에서 원래는 alert 팝업 페이지로 넘어가야되는데, e.preventDefault() 함수로 인해서 a태그 onClick에 대한 동작을 막는다.
잘 설명된 props, state 블로그 trustyoo86.github.io/react/2017/11/18/props-state-react.html kern의 FE-Note kern의 Front-end 개발 노트입니다. trustyoo86.github.io props, state의 차이점을 통해 state를 알아보자. props : 사용자가 컴포넌트를 사용하는 입장에서 중요 -> 사용자가 컴포넌트를 조작할 수 있게 한다. (외부) state : props의 값에 따라 내부 구현에 필요한 데이터. -> 사용자가 알 필요 없는 부분. (내부) 두 부분 외부, 내부를 철저하게 분리하는 것이 중요하다. state는 컴포넌트가 다양한 일들을 할 수 있게 만든다. props에 하드코딩 된 값을 state로 만들고..