전체 글
-
React 자식 컴포넌트에서 부모로 데이터 보내기Programming/React 2020. 5. 9. 10:32
앞서 포스팅한 React input 상태관리를 그대로 이어서 자식 컴포넌트에서 부모 컴포넌트로 데이터를 보내는 것을 복습겸 정리하도록 하겠습니다. App.js import React, { Component } from 'react'; import JoinForm from './components/JoinForm'; import './App.css'; class App extends Component { id = 0; state = { memberInfo: [], }; handleCreate = (data) => { const { memberInfo } = this.state; this.setState({ memberInfo: memberInfo.concat({ ...data, id: this.id++, ..
-
React input 상태관리 실시간 패스워드 체크하기Programming/React 2020. 5. 8. 11:00
velopert님의 React 인강을 보고 React input 상태관리에 대해 복습하는 의미에서 연습삼아 간단한 실시간 패스워드 체크해보는 것을 만들어보았다. 우선 프로젝트는 npx create-react-app으로 간단하게 실습환경을 구성하였다. 프로젝트 파일 구조 프로젝트 소스 파일 index.js 와 App.js 내용은 생략하도록 하겠다. JoinForm.js import React, { Component } from 'react'; class JoinForm extends Component { state = { name: '', firstPassword: '', lastPassword: '', checkPassword: '📝패스워드 입력📝', }; //input onChange 이벤트 handl..
-
React Props, State 이해 및 사용법Programming/React 2020. 5. 8. 09:00
Props / State props 와 state는 React에서 데이터를 사용할 때 다루는 개념이다. 실습 코드샌드박스(https://codesandbox.io/s/dank-pond-pfyvq) 를 사용하여 실습 Props props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 것이다. 읽기 전용 src 폴더 구조 CodeSandBox에서 리액트를 실행 시키면 MyName.js를 제외한 파일은 기본적으로 생성이 된다. MyName.js는 props 예제를 위해 만든 파일 App.js import React, { Component } from "react"; import "./styles.css"; import Name from "./Name.js"; class App extends Com..
-
React Class Component / Function ComponentProgramming/React 2020. 5. 7. 10:42
React 는 Class Component 와 Fucntion Component가 있다. 함수형 컴포넌트 ( function component ) import React from "react"; function Name({ first, last }) { return ( 이름 : {first} {last} ); } export default Name; 클래스형 컴포넌트 ( class component ) import React, { Component } from "react"; class Name extends Component { render() { const {first, last} = this.props; return ( 이름 : {first} {last} ); } } export default Na..