이번에 사용할 것은 useRef인데요! 지난번에 만들던 프로젝트를 연결해서 만들어보겠습니다. import {useRef} from "react" react로부터 useRef를 import해옵니다. import { useRef } from "react"; 1. DiaryEditor Component안에 const authorInput=useRef, const contentInput=useRef로 useRef객체를 만들어줍니다. 2. state.author.length { const authorInput = useRef(); // DOM요소에 접근할 수 있는 Reference const contentInput = useRef(); }); const handleSubmit = () => { if (state...
안녕하세요! 이번에 만들어볼 프로그램은 simple-diary입니다. 가장 먼저, React폴더를 만들어 프로젝트 만들 준비를 하겠습니다. CRA(Create React App) 1. 생성할 폴더의 Root폴더에서 $npx create-react-app (폴더이름) 입력하여 CRA생성 2. 필요없는 파일(src>App.test.js, logo.svg, reportWebVitals.js, setupTest.js) 삭제 3. $npm start DiaryEditor Component 두 번째, DiaryEditor Component를 만들어 author, content의 입력값을 변수 state로 제어하겠습니다. 1. import React,{useState} from "react" ; state를 이용해 ..
이번에 배울 것은 React의 Props인데요 ! Props란, Properties 즉 속성의 줄임말로, 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용합니다. 단방향 데이터 흐름을 가집니다. props는 state와 다르게 수정할 수 없다는 특징을 가지고 있습니다. 그리고, 문자열을 전달할 때는 큰따옴표 (" ")를, 문자열 외의 값을 전달할 때는 중괄호 ({ })를 사용합니다. 아래는 state글에서 다루었던 증가/감소 프로그램을 props를 이용해 초기값을 설정하는 프로그램입니다. https://peter-coding.tistory.com/184 [React] state (useState를 이용한) 오늘 배워 볼것은 React에서 state기능인데요 ! state를 사용하려면 import Re..
안녕하세요, 피터팬입니다! 오늘 배워 볼것은 React에서 usestate기능인데요 ! 응용프로그램에게 반응성을 추가하는 것이 state입니다. state가 없다면, 우리 UI는 절대 변하지 않을 것이빈다. state를 사용하려면 import React, {useState} from "react"가 필요합니다. 전에 배웠던 React의 state는 Constructor를 이용한 state였는데, 이번에는 useState를 이용한 훨신 간편한 방법입니다. 아래는 +를 누르면 count가 증가하고, -를 누르면 count가 감소하는 프로그램을 만드는 코드입니다. Component(Counter)를 화살표 함수로 만들어줍니다. 1. const [count,setCount] = useState(0) 처음보는 식..
Promise ; 비동기 처리에 활용되는 객체 - 원할한 데이터 통신을 위해 활용 ; 서버에 데이터를 요청했을 때, 데이터를 모두 받아오기전에 웹에 출력하는 오류 방지 구조 ; new Promise((resolve, reject) => {}) ; 대기 상태인 Promise객체를 생성하며 콜백 함수 선언 then()을 활용해 결과 값을 받을 수 있음 호출 성공인 resolve와 then function getData(){ return new Promise( (resolve, reject) => { let data = 10; resolve(data); }) } getData().then((resolvedData) => console.log(resolvedData)); 호출 실패인 reject와 catch f..
동기적 방식 ; 위에서 아래로 코드가 순서대로 실행 (thread가 1개) 비동기적 방식 ; 한번에 여러개가 진행 (thread가 여러개) - 콜백함수를 통해 JS는 동기적 방식 기반임 but 비동기 방식으로 처리되는 함수들이 있음 ex) setTimeout() Heap ; 변수, 상수, 함수 등 저장 동기적 처리 ; Call Stack에 옮겨진 후 처리 비동기적 처리 ; Web APIs에 옮겨진 후 , 비동기적 처리 됨 -> Callback Queue에 옮겨지 후 Call Stack에서 처리 콜백 함수 ; 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수 function func(a, func2) { console.log(a); const res = 5; func2(res); } func("a..
lodash ; JS의 인기 있는 라이브러리 중 하나. 보통 array, collection, date 등 데이터의 필수적인 구조를 쉽게 다룰 수 있게 끔 하는데 사용 _.uniqBy(C,'a') ; C객체에서 'a'요소가 중복되는 것 제거 _.unionBy(A,B,'a') ; A객체와 B객체를 합치는데, 중복되는 'a'는 제거 _find(A,{a:'b'}) ; A객체에서 a:'b'인 요소를 찾아 해당 요소를 반환 _findIndex(A,{a:'b'}) ; A객체에서 a:'b'인 요소를 찾아 해당 인덱스를 반환 _remove(A,{a:'b'}) ; A객체에서 a:'b'인 요소를 찾아 해당 요소를 삭제 Axios ; 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이..
React 공부법 1. ES6 문법과 JavaScript Immutability를 이해하고 시작 - React의 props, state 개념은 위 내용을 빼놓고 설명 불가. 꼭 이해하고 시작 할 것 2. React 는 책 대신 공식 문서로 시작 - React 만큼은 공식 관련 문서와 tutorial을 직접 진행하고 관련 자료들을 찾아보면서 직접 적용하는 방식으로 공부하는 것을 가장 추천 - 이 방법이 가장 짧은 시간 내에 양질의 지식을 얻을 수 있는 방법임은 확실 3. React 관련 구글링 시 지난 1년 이내로 설정 후 검색 - React는 정말 변화가 빠름 4. simple하게 가자. - 처음에는 CRA(create react app)을 통해 너무너무 간단한 앱을 만들기 => Redux 적용 -> 그..
