react-native를 하며 라이브러리에서 특정 메소드 또는 함수를 import 할 때 {}(중괄호) 안에 적어줄 때도 있고 그냥 메소드명만 표기할 때가 있는데, 예를 들어 아래와 같은 경우가 있다. import React, { useState, useEffect } from 'react'; React는 중괄호 없이 적었고, 상태 관리를 위한 Hook인 useState와 컴포넌트 랜더링 시 원하는 작업을 실행시키도록 도와주는 Hook인 useEffect는 중괄호 안에 메소드를 적었다. 이는 'react'라는 패키지 내부에서 어떻게 해당 메소드를 export 하는지에 따라 import시 표기하는 방법이 달라진다. 만약 아래와 같은 contextAPI가 있다고 가정한다. import React, { cre..
개발 중이던 앱은 푸시 알림을 받아 웹뷰를 보여주는 기능을 수행한다. 이때 푸시 알림은 가장 상위단에서 수신하고 url 정보 갱신한 후 하위 Home까지 props로 전달하고, 최종적으로 Home.js에서 useState를 이용해 url 변수를 갱신하여 rerender하는 구조를 계획하였다. 하지만 useState의 남용에 의해 아래 에러가 발생하였다. "Too many re-renders. React limits the number of renders to prevent an infinite loop." 해당 에러가 발생한 구조는 아래와 같다. // App.js import React, { useEffect, useState } from 'react'; import * as Notifications f..
1. 삼항 연산자(Ternary Operator) if-else 문으로 처리할 수 있지만 삼항 연산자를 사용하면 가독성은 떨어질 수 있지만 간결하게 표현이 가능하다. 브런치(Branch)문의 원래 기능처럼 런타임에 변수나 상태 등을 변경할 때 사용할 수 있다. const actions = ["Work", "Eat", "Leave"]; console.log(actions.includes("Eat") ? "Hamburger" : "Coding"); // "Hamburger" 2. 선택적 체인(Optional Chaining) 존재하지 않는 속성(property)을 호출하면 오류를 반환한다. 이때 오류가 아닌 undefined를 반환하도록 하는 선택적 체인(Optional Chaining) 방법이 있다. An..
주요 개념 싱글 쓰레드(Single Thread) 비동기(Asynchronous) JavaScript는 싱글 쓰레드(Single Thread) 언어이다. 한 번에 하나의 작업만 수행이 가능하다는 의미로 받아들일 수 있다. 하지만 우리가 사용하는 웹 페이지에는 여러 컴포넌트들과 기능들이 동시다발적으로 수행되고 있다. 이는 JavaScript는 메인 쓰레드인 이벤트 루프가 싱글 쓰레드이기 때문에 이렇게 불리지만 결국 실행한 후(런타임)에는 NodeJS와 같은 멀티 쓰레드 환경에서 구동되므로 동시다발적으로 여러 동작이 가능하다. 기존의 동기식 요청은 인터프리터 언어이므로 위에서 차례대로 수행된다. 앞에서 연산이 오래 걸리는 작업을 수행하고 뒤에 금방 끝날 수 있는 연산을 계속 미루게 되면 리소스의 낭비가 있어..
주요 개념 원시 타입(Primitive Type) 참조 타입(Reference Type) 깊은 복사(Deep copy) 얕은 복사(Shallow copy) JS에는 원시 타입(Primitive Type)과 참조 타입(Reference Type)이 있다. 1. 원시값 Number String Boolean Null Undefined 2. 객체(참조)값 Object Symbol 원시 타입인 숫자, 문자열, 논리형, 널, 언디파인드 다섯 가지를 제외한 모든 값은 객체(참조) 타입이다. 참조 타입이라고 불리는 이유는 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리되기 때문이다. 이름에서 알 수 있든 원시 타입은 값 자체를 복사하여 사용한다. 그렇기 때문에 어떠한 변수를 복사하고 나서 원본에 해당하는 변수를 ..
React Native를 사용하다 스타일링을 위한 스크립트를 작성하는 도중 ...Platform이라는 구문을 발견하게 되었다. 기존에 사용하던 언어들에서 보지 못한 특이한 종류의 구문들이 JS에서는 종종 보이는 것 같다는 느낌이 든다. 우선 이 전개구문(spread syntax)은 이름 처럼 객체나 배열들을 전개하여 사용할 수 있도록 해주는 문법이다. 마치 파이썬에서 함수에 인자 값들을 받을 때 *args를 이용하여 여러 인자를 한 번에 받을 때 사용하는 것과 비슷한 구문이라는 생각이 든다. 하지만 파이썬에선 *만 있으면 뒤에는 *qwer과 같이 앞에 *만 있다면 뒤에 오는 문자는 사용자 마음대로 써도 무관하지만 자바스크립트에서는 ...을 사용해야 한다는 차이점이 있다. {...obj} [...arr] ..
