IT_susu

useState는 함수형 컴포넌트에서 상태관리를 할 수 있도록 제공하는 훅입니다. class example class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( You clicked {this.state.count} times this.setState({ count: this.state.count + 1 })}> Click me ); } } hook example import React, { useState } from 'react'; function Example() { // 새로운 state 변수를 선언하고, count라 부르겠습니다...

이전했습니다. https://velog.io/@susu1991/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC

axios란? http client library. XHR을 이용한 HTTP 요청을 Promise 기반으로 처리합니다. 즉, 우리가 XHR을 다루지 않고도 ajax 호출을 가능하게 해줍니다. fetch API보다 Axios가 더 좋은 점은 아래와 같습니다. 1. 구형 브라우저 지원(IE8~) 2. 요청 중단 가능 3. 응답시간 초과 설정방법 있음. 4. CSRF 보호 기능 내장. 5. JSON 데이터 자동변환 6. 브라우저 뿐만 아니라 Node.js 사용 가능 1. 요청 1-1. 합쳐서 아래와 같이 기술 가능. axios({ url: 'https://test/api/cafe/list/today', method: 'get', data: { foo: 'diary' } }); url : 요청하는 주소 meth..

1. 프로미스란? http 통신의 결과를 우리 입맛에 맞게 처리할 때 비동기 처리를 위한 패턴방식중에 하나. es6에서 비동기 처리를 위한 패턴으로 도입하였으며 기존 콜백 패턴이 가진 단점을 보완하고 비동기 처리 시점을 명확하게 표현합니다. promise는 비동기식 작업의 최종 완료 또는 실패를 나타내는 객체. 2. 배경 기존 비동기 처리를 위한 패턴의 불편함. 2.1 콜백 헬 비동기로 처리를 하게되면 동기로 처리해야하는, 즉 앞선 처리의 결과값으로 뒤에 처리를 해야할 때 처리순서를 보장할 수 없기에 콜백패턴을 사용한다. 그런데 이게 많아질수록 중첩이 많이 되고 복잡도가 올라가게 된다. 코드는 위에서 아래로 보는데 왼쪽에서 오른쪽으로 읽게되어 가독성도 많이 떨어진다. 따라서 아래 블로그와 같은 콜백헬에 ..

1. Ajax Asynchronous JavaScript and XML은 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신방식입니다. 일반 서버통신과의 차이는 페이지의 일부만 갱신할 수 있어 빠른 퍼포먼스와 부드러운 화면 표시효과를 기대할 수 있습니다. 1-1. 비동기란? 컴퓨터 프로그래밍에서 메인 프로그램의 플로우에 독립적인 이벤트의 발생과 그 이벤트들을 다루는 방법을 의미합니다. 즉, 병렬적으로 코드를 진행하는 것을 말합니다. 하지만 자바스크립트는 단일 쓰레드 기반이기 때문에 병렬적으로 수행할 수가 없습니다. 그래서 I/O모델을 통해 비동기 프로그래밍을 수행합니다. I/O작업은 병렬적으로 Ajax, websocket 연결을 통해 데이터를 가져오는 작업을 할 수 있는데..

리액트에서 이벤트를 사용하는 방법을 알아봅시다. 역시 이벤트 사용법도 DOM 엘리먼트에서 이벤트를 처리하는 방법과 많이 비슷하면서 조금 다릅니다. react의 이벤트는 소문자가 아니라 camelCase 사용 jsx를 사용하여 문자열로 함수명(); 아닌 함수 값 으로 이벤트 핸들러 전달 return false를 이벤트 리스너 안에 사용해도 기본 동작을 방지할 수 없어 꼭 preventDefault를 명시적으로 호출해야 함 이벤트 리스너에 있는 파라미터는 리액트에서 제공하는 합성이벤트입니다. (실제 이벤트 객체가 아님) 클래스 컴포넌트의 경우, 이벤트리스너를 등록할 때 this의 처리가 문제가 됩니다. javascript에서 클래스 메서드는 this바인딩이 되어 있지 않으므로 명시적으로 표현을 해줘야 합니다..

1. ref Dom노드나 react 엘리먼트에 접근하는 방법을 제공 원래 리엑트에서는 데이터의 흐름을 가지고 순간적인 dom의 모습을 그려내는 방식이지만, 직접적으로 해당 자식을 수정해야 하는 경우가 있습니다. 이 때, 수정할 자식이 react 컴포넌트의 인스턴스일 수도 있고, dom 엘리먼트일 수도 있습니다. 이는 리액트의 일반적인 흐름방식이 아니라서 남용은 좋지 않습니다. 최대한 자제하는 방식으로 사용하는 것에 유념하면서 ref를 사용하여 이들에게 접근하는 방법을 알아봅시다. 2. 사용 사례 - 포커스, 텍스트 선택영역, 미디어의 재생 - 애니메이션 직접적 실행 - 서드파티 돔 라이브러리를 react와 같이 사용할 때 3. Ref 생성 React.createRef(); class MyComponent..

비구조화 할당이란? 객체나 배열에서 값을 빼와서 새로운 변수에 할당하는 과정을 기존의 문법보다 좀 더 간결하고 깔끔하게 작성하는 방법. [1] 배열의 해체 할당 let Arr = ['a', 'b', 'c']; let [, second] = Arr; console.log(second); // 'b' - rest parameter와 섞어서 사용 const arr = [1,2,3,4,5]; const [a, ...b] = arr; const [ , , ...c] = arr; - 기본값 적용 const [a = 10, b = 20] = []; // a = 10, b = 20 const [ c, d = c * 2] = [5]; // d = 10 - 값을 서로 바꿀 때 let a = 10; let b = 20; [..

새로운 함수 표현 방식입니다. [1] 표현 방식의 차이 // before function before() { return 'test' } // after const before = () => 'test'; 파라미터가 한개면 ()를 생략할 수 있고, 함수 스코프 안에 return값만 있다면 {}와 return을 생략할 수 있습니다. 그런데 객체의 경우는, 함수 스코프와 객체를 표현하는 {}가 똑같이 생겨서 혼란이 오므로, 예외적으로 객체만 리턴하는경우는 ()로 {}를 대체합니다. //before function e(x) { return {x:x} } // after const e = x => ({x}) 함수를 리턴하는 경우 생김새도 특이해서 남겨둠. // before var f = function(a) {..

1. useState useState는 state를 설정해 주는 함수입니다. const [count, setCount] = useState(0); setCount(count++); useState의 인자값에 state의 기본값을 넣어줄 수 있으며, 첫번째 변수는 state 변수, 두번째는 이 state를 제어하는 함수(세터함수)입니다. 기존의 state는 꼭 객체형식이어야 했고, this.setState는 기존의 state값들과 바뀐 값을 합쳤다면, useState는 객체가 아니어도 되며, 기존의 state들과 값을 병합하지 않고 대체합니다. 2. useEffect side effect 작업들을 도와주는 함수. componentDidMount, componentDidUpdate, componentWill..