차근차근 생활 & 코딩

아래와 같은 에러가 콘솔로그에 발생했다. 에러명 Warning: A component is changing an uncontrolled input of type time to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. undefined이 되었을때 발생하는 문제라고 한다. 그래서 input 내에 value 값에 공백이 와도 에러가 뜨지 않도록 변경하면 됩니다. 해결방법 value={value|| ''}

이번 시간에는 절대 경로 설정 방법에 대해 알려드리도록 하겠습니다. 처음 절대 경로를 설정하지 않으면 상대 경로를 이용하여 개발을 진행합니다. 상대경로로 이용하면 굳이 코드를 건드리지 않고 작업하기 편하니까요. 하지만..../../../ 이런 무한적인 반복으로 인해 먼가 잘못되었다는 것을 깨닫습니다. 처음부터 설정하고 작업을 진행 할 것이라는 슬픈 생각에 빠지게 됩니다. 절대 경로를 무조건 설정해야 하는 것은 아닙니다. 상대 경로든 절대 경로든 여러분들께서 편하신 방법대로 하시면 됩니다. 절대경로에 설정은 너무 너무 쉬우니 걱정하지 않으셔도 됩니다. } Step 1. NPM 라이브러리 설치하기 절대 경로를 편하게 지정하기 위해 만들어져 있는 라이브러리를 사용하도록 하겠습니다. $ npm install -..

저번 시간에는 클래스(Class) 형으로 input을 통해 데이터를 전달하는 것을 알려드렸는데요. 이번 시간은 함수(Hook) 형으로 input 만드는 법에 대해서 알아보도록 하겠습니다. Step 1. 함수형 템플릿 만들기 우리가 앞으로 작업해야 하는 함수형 템플릿을 만들도록 하겠습니다. import React, { useState } from 'react'; const InputForm = () => { return ( ) } export default InputForm; Step 2. State 정의하기 클래스(Class) 형에서는 this.state={username: '', password: ''} 이런 식으로 정의했었습니다. 하지만 함수(Hook) 형을 사용하시는 분들께서는 클래스(Class) ..

이번에 알려드릴 것은 클래스(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("자식에서 부모로..

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