분류 전체보기
-
[모던 리액트 Deep Dive] 1장 자바스크립트의 클래스란?React 2024. 2. 27. 08:58
자바스크립트 클래스란 무엇인가? 자바스크립트의 클래스란 특정한 객체를 만들기 위한 일종의 템플릿과 같은 개념이다. 따라서 클래스는 특정한 형태의 객체를 반복적으로 만들기 위해 사용하는 것이다. 자바스크립트 클래스의 코드에는 어떤 것이 있는지 하나씩 뜯어보자! 생성자 constructor는 생성자이며 객체를 생성하는 데 사용하는 특수한 메서드이다. 단 하나만 존재할 수 있으며 기본 생성자에서 별다르게 수행할 작업이 없다면 생략하는 것도 가능하다. class Car { constructor (name) { this.name = name } // SyntaxError: A class may only have one constructor constructor (name) { this.name = name } }..
-
[모던 리액트 Deep Dive] 1장 자바스크립트 함수를 만들 때 주의해야 할 사항React 2024. 2. 26. 15:41
자바스크립트로 코드를 작성하다보면 자주 함수 생성과 사용을 한다. 따라서 좋은 함수란 무엇인지 알아보자. 함수의 부수 효과를 최대한 억제하라 함수의 부수 효과 (side-effect) 란 함수 내의 작동으로 인해 함수가 아닌 함수 외부에 영향을 끼치는 것을 의미한다. 부수 효과가 없는 함수를 순수 함수라 하고, 부수 효과가 존재하는 함수를 비순수 함수라고 한다. 순수 함수는 언제 어디서나 어떠한 상황에서든 동일한 인수를 받으면 동일한 결과를 반환한다. 언제 실행되든 항상 결과가 동일하기 때문에 예측 가능하며 안정적이다. 그러나, 웹 애플리케이션을 만드는 과정에서 부수 효과는 피할 수 없는 요소이다. 만약 개발 중에 부수 효과가 꼭 필요하다면 리액트 관점에서 보면 부수 효과를 처리하는 훅인 useEffec..
-
[모던 리액트 Deep Dive] 1장 자바스크립트의 다양한 함수React 2024. 2. 7. 21:01
즉시 실행 함수 즉시 실행 함수 (Immediately Invoked Function Expression)은 말 그대로 함수를 정의하는 그 순간 즉시 실행되는 함수히다. (function (a, b) { return a + b })(10, 24); // 34 ((a, b) => { return a + b }, )(10, 24). // 34 즉시 실행 함수의 특징 1. 즉시 실행 함수는 한 번 선언하고 호출된 이후부터는 재호출이 불가능하다. 2. 따라서 글로벌 스코프를 오염시키지 않는 독립적인 함수 스코프를 운용할 수 있다. 3. 리팩터링에 도움이 된다. 즉시 실행 함수는 그 선언만으로도 실행이 끝난다는 것을 각인시키기 때문이다. 고차 함수 고차 함수(Higher Order Function)는 함수를 인수..
-
[모던 리액트 Deep Dive] 함수 선언문? 함수 표현식? 그래서 어떤 것이 좋은걸까?React 2024. 2. 1. 19:41
함수 선언문과 함수 표현식의 차이를 간단히 알아보자. 함수 선언문 hello() // hello function hello() { console.log('hello') } hello() // hello 함수 표현식 console.log(typeof hello === 'undefined') // true hello() // Uncaught TypeError: hello is not a function var hello = function () { console.log('hello') } hello() 위의 코드와 같이 함수 선언문은 함수 호이스팅을 통해 함수를 자유롭게 선언하고 어디서든 자유롭게 호출할 수 있다. 그리고 함수 표현식은 변수에 함수를 할당한 후 호출할 수 있다. 함수 선언문을 사용하면 선언된..
-
[모던 리액트 Deep Dive] 1장 자바스크립트 함수의 종류와 차이React 2024. 2. 1. 19:35
함수 리액트에서 함수형 컴포넌트를 작성하다 보면 화살표 함수와 일반 함수 모두 사용하는 경우가 많은데 정작 두 함수의 차이에 대해서 정확히 모른다. 자바스크립트 함수의 다양한 형태와 이러한 함수의 차이점이 무엇인지 알아보자. 함수란? 자바스크립트에서 함수란 작업을 수행하거나 값을 계산하는 등의 과정을 표현하고, 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것이다. function sum(a, b) { return a + b } sum(10, 24) // 34 함수명 : function 뒤에 오는 이름 매개변수 : 함수의 입력값으로 받는 a, b 반환값 : return 뒤에 작성된 것 인수 : sum 뒤에 넘겨준 두 개의 값 또한 리액트에서 컴포넌트를 만드는 함수도 기초적인 형태를 다룬다. fun..
-
[모던 리액트 Deep Dive] 1장 리액트에서 객체의 얕은 비교까지만 구현하는 이유는 무엇일까?React 2024. 1. 31. 11:37
리액트에서의 동등 비교 리액트에서의 비교는 Object.is로 먼저 비교를 수행한 다음에 Object.is에서 수행하지 못한 비교, 즉 객체 간 얕은 비교를 한 번 더 수행하는 방식을 거친다. 객체 간 얕은 비교란 객체의 첫 번째 깊이에 존재하는 값만 비교한다는 것을 의미한다. 여기서 객체 간 얕은 비교는 의존성 비교, 리액트의 동등 비교가 필요한 곳에서 쓰인다. 그런데 리액트에서 객체의 얕은 비교까지만 구현하는 이유는 무엇일까? JSX props는 객체이고 props를 일차적으로만 비교하면 되기 때문이다. type Props = { hello: string } function HelloComponent(props: Props) { return {hello} } // ... function App() {..
-
[모던 리액트 Deep Dive] 1장 자바스크립트의 동등 비교와 Object.isReact 2024. 1. 31. 10:21
값을 저장하는 방식의 차이 원시 타입과 객체 타입의 가장 큰 차이점은 값을 저장하는 방식의 차이다. 이 값을 저장하는 방식의 차이가 동등 비교를 할 때 차이를 만드는 원인이다. 원시 타입 let hello = 'hello world' let hi = hello console.log(hello === hi) // true let hello = 'hello world' let hi = 'hello world' console.log(hello === hi) // true 값을 비교하기 때문에, 값을 전달하는 방식과 각각 선언하는 방식 모두 true 를 반환한다. 객체 타입 객체는 프로퍼티 (property)를 삭제, 추가, 수정할 수 있으므로 원시 값과 다르게 변경 가능한 형태로 저장되며 값을 복사할 때도 값..
-
[모던 리액트 Deep Dive] 1장 자바스크립트의 데이터타입React 2024. 1. 30. 21:27
리액트를 다루기에 앞서, 리액트 코드의 기반이 되는 자바스크립트에 대해 먼저 공부하는 것이 좋다. 단순히 리액트 코드를 작성하는 것이 아니라 웹 애플리케이션이 작동하는 이면에서 리액트가 수행하는 작업을 이해하려면 자바스크립트의 기초를 먼저 다지는 것이 중요하다. 1. 자바스크립트의 동등 비교 리액트 함수형 컴포넌트와 훅을 반복적으로 작성하다 보면 의존성 배열 (dependencies)에 대해 고민하게 된다. 보통은 리액트에서 제공하는 eslint-react-config에 선언되어 있는 react-hooks/exhaustive-deps의 도움을 받아 해당 배열을 채우는데, 실제로 이것이 어떤 식으로 작동하는지, 왜 이런 변수를 써야하는지 이해 못하는 경우가 많다. 렌더링에서도 마찬가지이다. 리액트 컴포넌트..