차근차근 생활 & 코딩

이번에 알려드릴 것은 클래스(Class) 타입에서 input을 통해 데이터를 전달하는 것을 한번 해보도록 하겠습니다. 제일 처음으로 우리가 흔히 알고 있는 Form이라는 클래스를 만들어보았습니다. 이건 너무 간단하죠? 이건 누구나 아는 html입니다. 우리가 알고 싶은 건 이런 것이 아니겠죠? 리액트 맞추어 코드를 작성해 보도록 하겠습니다. Step 1. state 추가하기 input에 작성된 값을 넘겨주려면 받을 곳이 필요하여, state 추가가 필요합니다. datavalue라는 state를 추가하도록 하겠습니다. constructor(props) { super(props); this.state = {datavalue: ''}; } Step 2. handleChange 함수 추가하기 input 필드에서..

일반적으로 부모에서 자식으로 데이터를 전달합니다. 하지만... 코딩을 하다보면 우리가 원치 않는 자식에서 부모쪽으로 데이터를 전달해야 할 경우가 생깁니다. 그럼 실습을 통해서 데이터 전달하는 방법에 대해서 알아보도록 하겠습니다. 생각보다 간단하지만 처음 하시는 분들께서는 상당히 어려울 수 있습니다. prentFunction이라는 함수를 정의하였고, (data) 저쪽 파라미터로 데이터를 전달받게 됩니다. 부모 코드 import React, { Component } from 'react'; import Child from './Child'; class Parent extends Component { //부모 함수 정의 parentFunction = (data) => { console.log("자식에서 부모로..

Step 1. npm install 첫 번째로는 리액트를 설치하시면 됩니다. 설치 방법은 간단합니다. 이미 설치 되어 있으신 분들 께서는 Step 2 넘어 가시면 됩니다. [REACT] 리엑트 설치하기 리엑트 설치 및 실행 방법에 대해 간략히 설명 드리겠습니다. Part 1: React 설치 npm install -g create-react-app *기기에 Node >= 6 이상이 필요합니다. Part 2: React App 생성 create-react-app my-app Part.. ssilook.tistory.com Step 2. npm install package Npm(create-react-app)이 실행 중이면 가장 먼저 할 일은 패키지를 설치하는 것입니다. 다음 명령어를 입력해 5가지 라이브..

우린 이런 멋진 차트를 만들기 위해 Recharts란 라이브러리를 사용하여 간편하게 만들 예정이에요. Part 1 : React 설치하기 https://ssilook.tistory.com/entry/%EB%A6%AC%EC%97%91%ED%8A%B8React-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0 [REACT] 리엑트 설치하기 리엑트 설치 및 실행 방법에 대해 간략히 설명 드리겠습니다. Part 1: React 설치 npm install -g create-react-app *기기에 Node >= 6 이상이 필요합니다. Part 2: React App 생성 create-react-app my-app Part.. ssilook.tistory.com Part 2: React 실행 np..

우린 이런 멋진 테이블을 만들기 위해 Material-ui 이란 라이브러리를 사용하여 간편하게 만들 예정이에요. Part 1: React 설치 이건 앞에 설명하여 링크를 통해 참조하시면 돼요. https://ssilook.tistory.com/entry/%EB%A6%AC%EC%97%91%ED%8A%B8React-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0 [REACT] 리엑트 설치하기 리엑트 설치 및 실행 방법에 대해 간략히 설명 드리겠습니다. Part 1: React 설치 npm install -g create-react-app *기기에 Node >= 6 이상이 필요합니다. Part 2: React App 생성 create-react-app my-app Part.. ssilook...

리액트 설치 및 실행 방법에 대해 간략히 설명드리겠습니다. 리액트를 만들기 위해 개발 환경을 직접 구축해야 한다. 개발 환경을 직적 구축할 경우 시간이 오래 걸릴 뿐 아니라 유지 보수도 해야 한다. create-react-app은 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공을 해주는 장점이 있어 추천한다. 쉽게 말하면 어느 정도 사용자의 편의성을 위해 리액트를 필요한 것을 미리 구성해놓은 것이라고 생각하면 된다. Part 1: React 설치 npm install -g create-react-app *기기에 Node >= 6 이상이 필요합니다. Part 2: React App 생성 실행 후 my-app 폴더가 생상 되고 그 안에 몇 개의 폴더와 파일이 들어 있다. create-react-app m..