본문 바로가기

전체 글

 (39)
async / await async / await Promise보다 더욱 사용하기 편리하고 쉬운 async/await 문법에 대해서 알아 보도록 한다. async/await 는 기존의 비동기 처리 방식인 callback과 promise의 단점을 보완하고 가독성을 높여준다는 장점이 있다. JavaScript에서는 특히 비동기 처리 방식 때문에 위에서 아래로 진행되는 일반적인 코드의 흐름이 아닌 경우가 꽤 있다. async/await 는 이러한 단점을 보완하고 위에서 아래로 코드가 진행되도록 한다. async function getA() { return "A"; } function 앞에 async 키워드를 붙이는 순간 반환 값은 항상 Promise 이다. 이 값을 불러오기 위해서 then() 을 사용하곤 한다. async funct..
Promise Promise A promise is an object that may produce a single value some time in the future JavaScript는 싱글 스레드 언어이다. 싱글스레드인 만큼 한 번에 하나의 작업 밖에 수행할 수 없다는 의미이다. 즉, 처리 시간이 오래 걸리는 동작을 수행하는 동안 다른 동작을 미리 수행 시키고, 동시에 동작이 되는 듯한 느낌을 주는 것이다. 이러한 비동기적 처리를 하기 위해 JavaScript에서는 Promise 를 활용한다. Promise states Promise는 3가지의 상태를 가지고 있다. 상태 는 프로미스의 처리 과정을 의미한다. Pending(대기): 비동기 처리 로직이 아직 완료되지 않았음. Fulfilled(이행): 비동기 처리..
useCallback useCallback useCallback 은 특정 함수를 새로 만들지 않고 재사용 할 때 사용하는 hook 이다. 즉 함수 를 메모이제이션 하기 위해 사용하는 hook 이다. 컴포넌트가 re-render될 때 불필요하게 함수가 다시 생성되는 것을 방지한다. 따라서 이러한 React로 만든 앱을 최적화 하기 위해 불필요한 렌더링을 방지하여 앱의 퍼포먼스와 효율성을 높일 수 있다. useCallback(cb, deps) 사용 이유 React 에서는 컴포넌트가 다시 렌더링 될 때, 컴포넌트 안에 선언된 함수를 새로 생성한다. 즉 지속적으로 렌더링을 하며 함수도 계속 생성한다는 의미이다. const App = () => { const [name, setName] = useState("FoxMon") const..
Static Static Class 의 정적 메소드 를 정의한다. class를 new 키워드를 통해 생성하지 않아도 이름을 통해 접근 가능한 정적 메소드 를 정의한다. class Person { // static method static getName() { return "I am person" } } Static method 호출 위에서 설명 했듯이 new 키워드를 통해 생성하지 않아도 class의 이름을 통해 접근 가능하다. class Person { // static method static getName() { return "I am person" } } // I am person console.log(Person.getName()) 이처럼 정적 메서드는 특정 클래스 인스턴스가 아닌 클래스 전체에 필요한 기능..
Key JavaScript 에서의 List Array.prototype.map() map() 메소드는 배열 내의 모든 요소 각각에 대해 callback 함수를 호출한 결과를 모아 새로운 배열 을 반환한다. const arr = [1, 2, 3, 4] const arr2 = arr.map((a) => a * 2) console.log(arr2) // Array [2, 4, 6, 8] 위의 코드는 콘솔에 값 2, 4, 6, 8 을 담고 있는 새로운 Array 를 출력한다. React 에서 배열을 Element 리스트로 만드는 방식은 위의 방식과 유사하다. React에서의 map() 활용 아래와 같이 사용하여 listItems를 element 안에 포함할 수 있다. ... const arr = [1, 2, 3, 4]..
Optional chaining Optional chaining Optional chaining 연산자(?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않는다. 연결된 객체 체인 내에 존재하는 속성 값을 읽을 수 있다. const user = {} console.log(user.addr.city) // TypeError: Cannot read property "addr" of undefined 위와 같은 상황에서 user 오브젝트 내에 addr 이라는 속성이 없는데 읽는 것을 시도하고 있으므로 에러가 발생한다. 이러한 오류를 방지하기 위해 Optional chaining 을 사용하기 이전에는 && 연산자를 사용했다. const user = {} console.log(user && user.addr && user.addr.cit..
Custom Hook Custom Hook 자신만의 Hook을 만들어 컴포넌트 로직을 함수로 추출하여 재사용 가능성을 증가시킬 수 있다. 이처럼 React에서는 로직의 재사용성을 높이기 위해 Custom Hook을 만들어 사용한다. 단 아래와 같은 몇 가지 규칙이 존재한다. 사용자 정의 Hook의 이름은 use 로 시작한다 1. 특정 함수가 그 안에서 Hook을 호출하는지 알 수 없기 때문에 이름 규칙이 존재한다. 2. 이러한 규칙을 지키지 않으면 Hook 규칙을 준수하고 있는지 확인할 수 없다. 같은 Hook을 사용하는 두 개의 Component는 state를 공유하지 않는다. import { useState, useCallback } from "react" const useInputs = (initialValue) => ..
useEffect Hooks Hook은 Component에서 데이터(state) 를 관리하고 데이터가 변경될 때 Effect(상호작용) 를 다룰 수 있다. useState useEffect useCallback 이러한 것들이 모두 React의 hooks 이다. 기존의 Class 기반 Component는 State와 life-cycle을 관리하기 복잡했지만 Hooks는 이러한 것들을 간편하게 관리할 수 있게 도와준다. 단, Hooks는 React 함수 내부 에서만 사용이 가능하며 Hooks의 이름은 use로 시작한다. React Hook은 이러한 특징들이 있는데, 그 중에서 나를 골치아프게 했던 useEffect에 대한 기록을 남기려고 한다. Effect Hook Effect Hook을 사용하면 함수 컴포넌트에서 Side ..

티스토리툴바