Javascript는 동적 타입 언어로 변수의 타입을 미리 선언할 필요가 없다. Javascript는 컴파일 과정 없이 실행과 동시에 해석하는 인터프리터 언어다. 그런 원리에서 코드가 실행되는 과정에서 상황에 따라 값의 타입이 유연하게 바뀔 수 있는 것이다. 명시적 형변환 명시적 형변환은 말 그대로 명시적으로, 즉 의도적으로 형변환을 하는 경우에 해당한다. 명시적 형변환은 주로 String, number, boolean 타입으로 이루어진다. 어떤 값의 타입을 의도적으로 변경해서 사용하겠다는 의미기 때문이다. symbol은 자주 사용되지 않고 null과 undefined는 자료형인 동시에 값이므로 필요한 경우 그 값을 할당하면 된다. 따라서 이 세 종류의 명시적 형변환을 위해 각각 String(), Num..

Javascript는 꽤 오랫동안 호환성 이슈 없이 발전해 왔다. 기존의 기능을 변경하지 않으면서 새로운 기능들이 추가되었던 것이다. 덕분에 기존에 작성한 코드는 절대 망가지지 않는다는 장점이 있었다. 하지만 Javascript 창시자들이 했던 실수나 불완전한 결정이 언어 안에 그대로 박제되어 있다는 단점도 생길 수밖에 없었다. 이런 상황은 ECMAScript5(ES5)가 등장하기 전까지 지속되었다. 그러나 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었다. 그리고 기존 기능을 변경하였기 때문에 하위 호환성 문제가 생기게 되었다. 그리하여 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계되었다. 대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict m..

typeof 연산자는 인수의 자료형을 반환한다. 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 용이하다. typeof 연산자는 두 가지 형태의 문법을 지원한다. 1. 연산자 typeof x 2. 함수 typeof(x) 괄호가 있든 없든 결과는 동일하다. typeof 연산자 사용 예시(1) typeof undefined // "undefined" typeof 0 // "number" typeof 10n // "bigint" typeof true // "boolean" typeof "foo" // "string" typeof Symbol("id") // "symbol" 위와 같이 typeof x를 호출하면 인수의 자료형을 나타내는 문자열을 반환한다. typeof 연산..

Javascript에서 값은 항상 문자열이나 숫자영 같은 특정한 자료형에 속한다. Javascript의 변수는 자료형에 관계 없이 모든 데이터일 수 있는데, 따라서 아래와 같이 특정 변수는 어떤 순간에는 문자열일 수 있고 또 다른 순간엔 숫자가 될 수도 있는 것이다. // no error let message = "hello"; message = 123456; 위처럼 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바뀔 수 있으므로 Javascript를 동적 타입 언어라고 한다. 그러므로 변수의 타입을 미리 선언할 필요가 없고, 프로그램이 처리되는 과정에서 자동으로 파악되며 결국 같은 변수임에도 상황에 따라 값의 타입이 바뀔 수 있는 것이다. 1. 숫자형_Number type 숫자형은 정수 및 부동소..

예를 들어 컴포넌트 내부에 let 키워드를 사용하여 변수를 선언했을 때 다음 렌더링이 될 때 변수 값이 초기화 된다. 만약 유지하는 값을 관리하려면 useState를 사용해야 하는데, useState는 상태를 바꾸게 되면 컴포넌트가 리 랜더링 된다. 하지만, 가끔 어떤 값을 바꿨을 때 굳이 리렌더링 할 필요 없는 값을 관리하는 경우도 있다. 이럴 때 useRef를 사용하면 된다. useRef는 특정 DOM을 선택해야할 때 사용하는데 이것 외에도 컴포넌트가 리 렌더링 될 때마다 계속 기억 되는 값을 관리할 때도 사용할 수 있다. 주로 setTimeout, setInterval을 사용했을 때 주어지는 ID값을 기억해야 할 때 사용하고 외부 라이브러리를 사용하여 생성된 인스턴스를 담을 때도 사용하고, 스크롤 ..

HTML/Javascript 환경에서는 특정 DOM을 선택할 때 getElementbyid나 query selector를 사용한다. react를 사용할 때 특정 엘리먼트의 위치나 크기를 가져와야 한다 든지, 스크롤바 위치를 가져오거나 설정해야 한다 든지, 포커스를 설정해야 된다 든지 등 다양한 상황이 있다. 추가적으로 video.js 라이브러리나, d3, chart.js 등 그래픽 라이브러리를 사용할 때에도 특정 DOM에 라이브러리를 적용하기 때문에 DOM을 선택하는 상황이 발생할 수 있다. 이 때 react에서 ref라는 것을 사용한다. 함수형 컴포넌트에서는 useRef를 사용하고 클래스형 컴포넌트에서는 React.createRef()를 사용한다. 우선 이번 챕터에서는 함수형 컴포넌트인 useRef를 ..

이전 포스트인 input 상태 관리하기의 응용 name 식별자를 사용하여 여러 개의 input 박스의 상태를 관리하는 예이다. 이번 챕터에서 가장 중요한 것은 객체 상태를 업데이트 하는 것인데, 리액트에서 객체를 업데이트 할 때는 반드시 기존 객체를 먼저 복사해야 한다. 먼저 InputSample.js 파일을 생성한다. import React, {useState} from 'react'; function InputSample() { // 객체 형태의 상태를 관리 const [inputs, setInputs] = useState({ name : '', nickname: '' }) // 네임과 닉네임 값을 간편하게 사용하기 위해 name, nickname 값을 비구조화 할당으로 추출 const {name, ..

React에서 input 창에 간단한 텍스트 입력 및 초기화에 대한 소스 예시 먼저 InputSample.js 파일을 생성하고 아래 소스를 적용한다. function InputSample() { const [text, setText] = useState(''); // 하단 input 박스에서 값 변경 시 이벤트 객체가 파라미터(e)에 담겨서 온다. const onChange = (e) => { // e.target에는 이벤트가 발생한 input DOM에 대한 정보를 가지고 있다. console.log(e.target); // 이벤트가 발생한 DOM의 값 가져오기 console.log(e.target.value); setText(e.target.value); } // 초기화 const onReset = (..