React-JS

React-JS

Java Script

JS의 동등성

React에서는 useEffect와 같은 훅에서 의존성 배열을 다룰 때 해당 배열 내에 포함된 값들에 대한 동등성 비교를 Object.is 메서드를 통해 수행합니다. 이 방식은 참조형 타입에 있어서 동일한 메모리 주소를 가리키는 경우 두 객체를 동등하다고 간주하는 "얕은 비교" 방식을 채택합니다. 따라서 리액티브한 값이라 할지라도, 매 렌더링마다 그 값이 변경되었는지 여부는 참조된 메모리 주소의 동등성을 기준으로 판단되며 이는 React의 리렌더링 원리와 상당히 밀접하게 연관되어 있습니다.

JS의 데이터 타입

자바스크립트의 데이터 타입 체계는 근본적으로 두 가지 범주로 구분됩니다: 원시 타입과 객체 타입. 원시 타입은 객체 타입을 제외한 모든 기본 타입을 포함하며, 이에는 boolean, string, number, null, undefined, BigInt, Symbol이 해당됩니다.

 

원시적 타입들의 특성상, 값이 직접적으로 메모리에 저장되며  값의 복사 시 새로운 메모리 주소에 해당 값이 할당됩니다. 이는 원시 타입의 데이터가 불변성을 가지며 독립적인 메모리 공간에서 관리됨을 의미합니다.

 

반면 객체 타입은 참조 타입으로 분류되며 데이터는 메모리 내의 주소를 통해 참조됩니다.

이 경우, 변수는 데이터의 실제 값이 아닌 메모리 주소를 저장하게 되므로, 객체 타입의 데이터를 다른 변수에 할당하면 메모리 주소가 복사됩니다. 결과적으로, 여러 변수가 동일한 객체 데이터를 공유할 수 있게 됩니다.

 

자바스크립트에서 typeof null === 'object'이라는 비교문은 언어 설계 초기의 결함에서 비롯된 것으로  많은 개발자들 사이에서 의문을 불러일으키는 비교 구문입니다. 이는 null이 실제로는 '빈 값'을 표현하는 원시 타입임에도 불구하고, 객체 타입으로 분류되는 현상을 나타냅니다.  이런 비일관성은 자바스크립트의 초기 버전과의 호환성을 유지하기 위해 아직까지 수정되지 않은 상태입니다.

 

undefined는 값이 아직 할당되지 않은 변수의 초기 상태를 나타내며, null은 개발자가 명시적으로 '값이 없음'을 표현하기 위해 사용합니다. 두 타입 모두 값의 부재를 나타내지만 사용 목적과 의미에 있어서 차이가 있습니다. 이러한 자바스크립트의 데이터 타입 체계는 프로그래밍 시 변수의 데이터 관리 방법을 이해하는 데 있어 핵심적인 요소입니다. 효율적인 데이터 처리와 메모리 관리를 위해 반드시 이를 완벽하게 숙지하고 개발을 해야 예상치 못한 버그를 피할 수 있습니다.

JS의 Functions

함수는 기본적으로 특정 작업을 수행하거나 값을 계산하는 일련의 과정을 체계화한 실행 단위로, 코드의 재사용성과 모듈성을 높이는 핵심적인 구성 요소입니다.

 

자바스크립트에서 함수의 정의는 다양한 방식으로 이루어질 수 있으며, 각각의 방식은 특정 상황에 따라 유용하게 사용될 수 있습니다.

 

함수 선언문 방식 함수 선언문은 function 키워드를 사용하여 함수를 직접 정의하는 전통적인 방식입니다. 이 방식의 주된 장점은 호이스팅(hoisting)에 있습니다. 호이스팅은 자바스크립트 엔진이 코드를 실행하기 전에 함수 선언문을 메모리에 사전에 로드하는 특성을 말하며, 이로 인해 함수가 정의된 위치와 상관없이 코드 내 어느 곳에서든 해당 함수를 호출할 수 있습니다.

 

function add(a, b) { return a + b; };

 

함수 표현식 방식 함수 표현식은 함수를 function 키워드를 사용하여 정의한 후, 이를 변수에 할당하는 방식입니다. 이 방식은 함수 선언문과 달리 호이스팅의 영향을 받지 않으며 함수가 변수에 할당되기 전까지는 참조할 수 없습니다.

 

이는 변수의 스코프 규칙을 따르기 때문입니다.

 

const add = function(a, b) { return a + b; };

 

Function 생성자 함수는 런타임 시점에 문자열을 통해 함수를 동적으로 생성할 수 있는 방법을 제공합니다. 이 방식은 함수의 매개변수와 본문을 문자열 형태로 전달받아 새로운 함수 인스턴스를 생성합니다. Function 생성자의 사용은 일반적인 함수 정의 방식보다 유연성이 높지만, 문자열을 통한 코드 실행은 보안과 성능 상의 문제를 야기할 수 있습니다. var add = new Function('a', 'b', 'return a + b');

 

화살표 함수는 => 키워드를 사용하여 더 간결한 문법으로 함수를 정의할 수 있는 현대적 방식입니다. 화살표 함수는 자신만의 this 바인딩을 생성하지 않으며 대신 정의된 스코프의 this 값을 상속받게 됩니다. 이 특성은 특히 콜백 함수와 같이 this 바인딩이 중요한 상황에서 유용하게 사용될 수 있습니다.

 

const add = (a, b) => a + b;

주의사항

1. 함수의 부수 효과를 최대한 줄이세요.

부수효과란 함수 내부의 작동 결과가 함수 외부에 영향을 미치는 현상입니다.

이런 부수효과로 인해 예상치 못한 버그나 성능에 문제가 생길 수도 있습니다.

 

2. 함수를 작게 만들어라

 

함수를 생성할 때는 한 가지 기능만 수행할 수 있도록 설계해야 함수의 조합 및 전체적인 로직을 설계하는 과정에 있어서 예상치 못한 에러를 피할 수 있습니다.

 

개발의 모든 과정은 함수 생성의 연속이다. 잘 만들어 놓은 함수를 계속 조합해서 개발을 하게 되면 개발의 전체적인 소요시간을 엄청나게 줄일 수 있습니다. 이 부분을 명심하고 함수 개발을 하시면 됩니다.