Yuu.log

리액트 Conext API에 대해 배웠던 내용을 기록하고자 하는 포스트입니다. 해당 포스트는 다음과 같은 목차로 진행됩니다. 목차 들어가기 전 Context API는 상태관리 도구가 아니다? 의존성 주입이란? Context API로 의존성 주입하기 의존성은 교체 가능해야 한다. Context API로 암시적 종속성을 명시적으로 만들자 마무리 레퍼런스 들어가기 전 해당 포스트는 Context API의 기초적인 부분을 다루지 않기 때문에 Context API에 대해 기초적인 지식이 필요합니다. 추가적으로 리액트 쿼리에 대한 내용이 있으므로 리액트 쿼리에 대한 배경 지식도 있으면 더욱 좋습니다. 아직 Context API를 모르신다면 아래의 링크를 통해 리액트 공식문서 보며 Context API를 배워보세요🙂..

이전 포스트 [TS] 1. TypeScript 환경설정 TypeScript란? TypeScript는 마이크로소프트에서 개발한 JavaScript를 포함하는 상위 집합(Superset) 언어로 브라우저, 운영체제 상관없이 이용가능한 오픈소스입니다. TypeScript는 왜 등장하게 되었을까요? 22yuu.tistory.com Enum 열거형(Enum)은 특정 값의 집합을 정의할 때 사용합니다. JavaScript에서는 기본적으로 열거형을 지원하지 않지만, TypeScript에서는 문자형 열거형과 숫자형 열거형을 지원합니다. 열거형은 문자형, 숫자형 이 둘의 조합으로도 정의 가능합니다. 열거형은 일반적으로 상수값을 대신하여 사용합니다. 코드의 가독성과 개발자의 오타와 같은 실수를 방지할 수 있습니다. 숫자형..

TypeScript란? TypeScript는 마이크로소프트에서 개발한 JavaScript를 포함하는 상위 집합(Superset) 언어로 브라우저, 운영체제 상관없이 이용가능한 오픈소스입니다. TypeScript는 왜 등장하게 되었을까요? 우선 JavaScript의 불편함에 대해 이야기해보겠습니다. JavaScript 언어는 동적 타입 언어로 매우 유연하고 편리하게 코드 작성이 가능합니다. 하지만 이러한 유연함 때문에 불편함을 경험해보신 적 없으신가요? JavaScript 프로그래머들이 작성하는 가장 흔한 오류는 타입 오류입니다. 다른 종류의 값이 예상되는 곳에 특정한 값이 사용된 경우라던지, 단순한 오타, 라이브러리 API를 이해하지 못하거나 런타임 동작에대한 잘못된 가정 또는 기타 다른 오류가 발생하죠..

클로저의 의미와 원리 이해 클로저(Closure)는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성으로 자바스크립트 고유의 개념은 아닙니다. 몇몇 언어에서는 구현이 불가능하거나 특수한 방식으로 구현해야 합니다. 하지만 자바스크립트에서는 생성자 함수를 제외한 대부분의 함수는 자연스럽게 클로저가 됩니다. 우선 다양한 문헌에서 클로저를 제각각 다르게 다루고 있는데요. 한 번 살펴볼까요? "자신을 내포하는 함수의 컨텍스트에 접근할 수 있는 함수" - 더글라스 크록포드, "함수가 특정 스코프에 접근할 수 있도록 의도적으로 그 스코프에 정의하는 것" - 에단 브라운, "함수를 선언할 때 만들어지는 유효범위가 사라진 후에도 호출할 수 있는 함수 - 존 레식, "이미 생명 주기상 끝난 외부 함수의 변수를 참조하..

상태 관리 라이브러리의 필요성 리액트에서 컴포넌트 간 데이터를 주고 받을 때 상위 컴포넌트에서 하위 컴포넌트로 “props”를 전달받습니다. 하지만 이렇게 “props”를 전달하는 방법은 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 여러 컴포넌트를 거치게 되면서 특정 컴포넌트는 해당 데이터를 필요하지 않아 “props”를 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들이 생기게 됩니다. 이러한 현상을 “Props Drilling”이라고 합니다. 그림으로 살펴보면 더 명확하게 이해하실 수 있을 겁니다. 위의 이미지를 보면 색이 칠해져 있는 요소는 데이터가 필요한 컴포넌트입니다. 색이 칠해져 있지 않은 요소는 데이터가 필요 없는 컴포넌트입니다. 즉, 색이 칠해져 있지 않은 컴포넌트는 데이터가 필..

실행 컨텍스트란? 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 가장 중요한 핵심 개념 중 하나로 클로저를 지원하는 대부분의 언어에서는 이와 유사하거나 동일한 개념이 적용되어 있습니다. 실행 컨텍스트를 바르게 이해하면 다음과 같은 자바스크립트의 동작 방식을 이해하는데 큰 도움이 됩니다. 스코프 기반 변수와 값을 관리하는 방식 호이스팅이 발생하는 이유 클로저의 동작 방식 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식 this 바인딩 우선 들어가기 전 ECMAScript 사양에서 정의한 4가지 소스코드 타입에 관해서 알아보고 갑시다. 소스코드의 타입 설명 전역 코드 전역에 존재하는 소스코드를 말합니다. 전역..

Context란? 리액트에서 두 개 이상의 컴포넌트 간의 데이터를 주고 받기 위해 상위 컴포넌트에서 하위 컴포넌트로 "props"를 전달해줍니다. 마찬가지로 "Context"도 "props"가 아닌 또 다른 방법으로 컴포넌트 간에 값을 전달하는 방법입니다. 즉, 컴포넌트간 값을 공유하는 여러 방법 중 하나인 셈이죠. 왜 Context를 사용하죠? "데이터를 주고 받을 때 props를 사용한다면서요...!? 그럼 왜 Context가 필요하죠? "라는 의문이 들 수도 있습니다. 아래의 이미지를 봅시다. 색이 칠해져 있는 요소는 데이터가 필요한 컴포넌트입니다. 색이 칠해져 있지 않은 요소는 데이터가 필요 없는 컴포넌트입니다. 이미지를 다시 한번 보면 색이 칠해져 있지 않은 컴포넌트는 데이터가 필요하지 않지만 ..

컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립적인 모듈을 뜻한다. 프론트엔드에서 UI를 구성할 때 컴포넌트 기반으로 개발하면 마치 레고 블록을 쌓는 것처럼 이미 만들어진 컴포넌트들을 조합하여 화면을 구성할 수 있다. 컴포넌트들은 기능 구현 코드를 캡슐화하므로서 독립적으로 존재한다. 또한 재사용이 필요한 컴포넌트의 기능을 추상화하여 구현하므로서 재사용성에 매우 용이하다. 이러한 독립성과 재사용성으로 재사용을 원하는 어느곳이든 코드 충돌에 대한 걱정 없이 화면 구성이 가능하다는 큰 장점이 있다. 그 외에도 컴포넌트 기반 개발의 장점은 관심사 분리, 응집도 있는 로직 등이 있으며 독립성이 큰 장점 중 하나인 만큼 변경에 대해 엄청 유연해 유지보수 측면에서도 정말 좋다. 현대 대부..