React/basic

더보기 이전글 :: [React] useState, onChange를 활용하여 input값 변화시키기! input 상태관리 https://june6.tistory.com/33 :: [React] Input - submit - form 구현하기 [리로딩 방지 외] https://june6.tistory.com/36 목표 useState를 사용하여 간단하게 리스트에 내용을 추가한다. 일단 이전에 작성했던 코드를 가져와보았다. //InputForm.js import React, { useState } from 'react' const InputForm = ()=>{ const [text, setText] = useState('') const onChange =(e)=>{ setText(e.target.valu..

목표 input에 있는 내용을 submit 하였을 때 리로딩을 방지하고 input값을 제대로 전달한다. InputForm.js 파일 생성 후 아래와 같이 기본 내용을 마크업한다. ** InputForm.js ** import React from 'react'; const InputForm = () => { return( 이름 : ) } export default InputForm; Input에 내 이름을 입력하고 버튼을 클릭했을때 내가 입력한 input 값이 제대로 넘어가는지가 궁금했다! 일단 input 상태를 먼저 변화시키자. const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.value); } . .생략 . ..

목표 useState, onChange를 활용하여 input값 변화시키기! input 상태를 관리할때는 useState, onChange 를 사용할 수 있다. input에 value값 수정했을때 바뀌지 않을 경우 아래와 같이 설정을 바꿔보쟈 import { useState } from 'react'; import './App.css'; function App() { const [value, setValue] = useState(''); const onChange =(e)=>{ setValue(e.target.value) //console.log(e.target.value) } return ( 내용 : {value} ); } export default App; 1. const onChange는 input에..

목표 Firebase 를 이용하여 신규 사용자 가입 (이메일 가입) 구현하기. 구글에서 제공한 기본 코드 그대로 복붙하여봤지만 역시나 제대로 구현이 안됐습니다.. 하지만 2시간동안 지지고볶다가 겨우 완성한 기능!!! 너무뿌듯해요. import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); createUserWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; // ... }) .catch((error) => { const errorCo..

렌더링이 될 때 마다 감지하는 useEffect. react class형 컴포넌트의 [componentDidMount, componentDidUpdate]와 유사합니다. Info.js import {useState, useEffect } from 'react'; const Info = () => { const [name, setName] = useState(''); const [nickname, setNickname] = useState(''); useEffect(()=>{ console.log('렌더링 완료'); console.log({name, nickname}); }); const onChangeName = e => { setName(e.target.value); }; const onChangeNi..

useState는 가장 기본적인 Hook 이며, 가변적인 상태를 지닐 수 있게 해 주는 훅 입니다. 함수 컴포넌트에서 상태 관리를 할 때에는 useState 를 사용할 것입니다. Counter.js import {useState} from 'react'; const Counter = () => { const [value, setValue] = useState(0) //useState의 파라미터는 기본값을 의미한다. 따라서 0 은 value의 기본값이 된다. return( 현재 카운터 값은 {value} 입니다. {setValue(value + 1)}} >+1 {setValue(value - 1)}} >-1 ); }; export default Counter; 현재 useState 가 호출되었을 때 [va..

HTML 이나 CSS 에서는 이미지를 넣기가 쉽지만 React에서는 다른 방법으로 이미지를 넣어야만 합니다. 방법은 아래처럼 import 이후 사용하면 됩니다. import myImg from '이미지경로/이미지이름.jpg' // myImg는 아무렇게나 바꿔도 된다.

화살표 함수의 장점은 함수를 정의하는 영역의 this를 그대로 전달 받을 수 있다는 것입니다. 우선 아래 3가지 형식으로 같은 값을 출력하는 식을 보겠습니다. //1. 전통적인 JS 함수 형식 const test1 = function(a,b){ return a+b; } //2. 화살표 함수 형식 const test2 = (a,b) => { return a+b; } //3. 리턴문만 작성한 경우 화살표 함수를 아래처럼 더 압축할 수 있다. const test3 = (a,b) => a+b; 이 3가지 형식은 모두 동일하게 변환되지만 1, 2 함수 형식은 서로 다른 this 값이 바인딩 될 수 있습니다. 특히 함수가 중첩되었을때는 this 로 인해 문제가발생합니다. this 기본 규칙 : 기본적으로 this는..

ES6가 생기기 전에는 변수 선언을 하기 위해 var을 주로 사용해 왔었습니다. 하지만 var은 호이스팅하기 때문에 변수가 중복 선언 되어도 에러가 발생하지 않습니다. 호이스팅이란 ? 실행 컨텍스트가 만들어진 이후에 var 키워드가 부여된 변수를 미리 생성하는 것. = 변수의 선언을 스코프 최상단으로 옮기는 행위 = JS 코드를 구문 분석 > 선언된 var 변수에 메모리 미리 할당 ( 변수를 미리 생성 ) console.log(a1); var a1 = "변수 선언 순서가 이상해도 에러가 발생하지 않는다." 호이스팅의 특징 1. 함수 단위로 호이스팅한다. - 함수 호출시 실행을 위한 컨텍스트를 만들고, 내부 코드 중 var 가 부여된 것들을 찾아 실행 컨텍스트 내부에 변수를 미리 생성한다. var로 생성된..