모던 리액트 Deep Dive 들어가면서 해당 내용은 인강을 통해 들었던 내용이 있으나, 개념적으로 부족한 부분이 있는 것으로 판단되어, 조금 더 기본이 되는 근본적인 내용을 정리하기 위하여 초반 부분의 독서 및 정리한 내용이다. 필요하거나, 중요하다고 생각하는 내용만을 담고 있다. 주의! 챕터 상의 3차 목차에 대해서 제목으로 지정하며, 보고 알아둬야 하는 부분은 페이지까지 기록한다. 01 장 리액트 개발을 위해 꼭 알아야 할 자바스크립트 1.2.3 다양한 함수 살펴보기 즉시 실행 함수 43p 함수를 정의하고 즉시 실행됨 : 글로벌 스코프를 오염시키지 않는 독립적인 함수 스코프를 운용할 수 있다. 고차 함수 43p 함수를 인수로 받거나 결과로 새로운 함수를 반환시킬 수 있다. 이런 역할을 하는 함수를 고차 함수(Higher Order Function)라고 한다. 이 특징을 사용하면 함수형 컴포넌트를 인수로 받아 새로운 함수형 컴포넌트를 반환하는 고차함수를 만들 수 있고, 이를…

모던 리액트 Deep Dive 들어가면서 해당 내용은 인강을 통해 들었던 내용이 있으나, 개념적으로 부족한 부분이 있는 것으로 판단되어, 조금 더 기본이 되는 근본적인 내용을 정리하기 위하여 초반 부분의 독서 및 정리한 내용이다. 필요하거나, 중요하다고 생각하는 내용만을 담고 있다. 주의! 챕터 상의 3차 목차에 대해서 제목으로 지정하며, 보고 알아둬야 하는 부분은 페이지까지 기록한다. 01 장 리액트 개발을 위해 꼭 알아야 할 자바스크립트 1.1 자바스크립트의 동등 비교 리액트와 함께 사용 가능한 다른 라이브러리들 21p~ 상태관리 : Redux, Zustand, Recoil, Jotai 서버 사이드 렌더링 : Next.js, Remix, Hydrogen 애니메이션 : Framer Motion, react-spring, React Move 차트 : Rechats, visx, nivo 폼 : React Hook Form, Fromik, React Final Form JS에서 un…

섹션 6 State and Lifecycle State 와 Lifecycle의 정리⭐ state state 란 리액트 Componenet의 상태를 의미한다. 여기서 상태란 정상 / 비정상의 의미 보다는 데이터라는 쪽에 가까운 의미를 내포하고 있다. 즉, state 는 리엑트 컴포넌트에서 변경 가능한 데이터를 의미한다. 여기서 state를 사용하는 가는 각 개발자의 정의에 따라 움직인다고 보면된다. 렌더링이나 데이터 흐름에 사용되는 값만 state 에 포함시켜야 한다. 왜냐하면 결국 state란 데이터의 변경과 함께 렌더링이 발생하기 때문에 불필요한 데이터를 등록했다간, 리엑트의 state는 JavaScript 객체라고 봐도 무방하다. state 는 직접 수정할 순 없다. (하면 안된다) 왜냐하면 렌더링과 연관된 값들이기 때문에 개발자의 의도한 렌더링과는 다르게 나오게 만들 수도 있기 때문이다. Lifecycle 생명주기 리엑트 컴포넌트가 생성되는 시점, 사라지는 시점이 정해져 있다…

섹션 5 Components and Props Components 와 Props의 정의 ⭐ 반드시 완벽하게 이해해야 한다. Components Component-Based : 여러 컴포넌트들이 하나의 부품들이 되고, 그 부품들의 모음의 구조로 짜여지는 코드의 형식이 리엑트의 큰 구조라고 할 수 있다. 에어 비앤비 페이지의 컴포넌트들 기본적으로 작은 컴포넌트들이 모여 큰 컴포넌트로, 큰 컴포넌트들이 모여 페이지 전체를 구성하게 된다. 그렇기에 개념적으로 보면 자바스크립트의 함수와 유사하다고 볼 수 있으나, React 컴포넌트들의 입력과 출력은 다소 다르다고 할 수 있다. React Component의 입력과 출력을 보면, 위의 사진처럼 되어 있어 JS의 함수와는 차별이 된다. Props(속성)을 넣으면, 이를 화면에 맞추어 표현해주는 것이 React Component인 것이다. 이러한 구조는 객체지향의 클래스-인스턴스의 관계와 닮아 있게 생성되는데, Component들을 만들…

색션 4 Rendering Elements Elements의 정의와 생김새 Elements란? 리액트 앱을 구성하는 가장 작은 블록들 본 이미지는 DOM Elements들을 의미하며, 기본적으로 태그 형태의 노드들로 구성되어 있다. 일반적인 DOM Elements와 React Elements DOM elements : 화면에 나타나는 내용을 기술하는 자바스크립트 객체. Descriptor 라는 명칭이었으나, 이후 바뀌어 지금의 구조로 바뀌었다. React Elements : Virtual DOM에 존재하는 Elements들을 일컫는 말이라고 보면 된다. 즉, DOM Elements의 가상 표현이 React Elements 라고 볼 수 있다. 또한 Render라는 작업 전의 데이터를 모두 가지고 있는 만큼 React Elements는 렌더 후의 그것보다 상대적으로 무겁다. 결론적으로 React Elements가 화면에 표시될 것들을 기술하는 것이라고 보면된다. Elements…

색션 3 JSX JSX의 정의와 역할 JSX 란? JavaScript = JS JSX = A Syntax Extension to Java Script = 자바 스크립트 문법의 확장 = Java Script + XML/HTML JSX 코드 = JS + XML/HTML 의 구조를 보여준다. JSX의 역할 내부적으롷 XML, HTML 코드를 JS 코드로 변환해주는 역할을 한다. 이러한 역할을 하는 것이 React.createElement 코드이다. JSX를 사용한 코드 JSX 를 사용하지 않은 코드 두 코드를 비교하면 JSX를 사용하면 모두 createElement 코드부분이 변화되어 XML, HTML 형식이라는 걸 알 수 있다 위의 코드는 React.createElement 의 결과로 아래와 같은 객체가 생성되게 된다. 지금까지의 내용을 볼 때, JSX를 사용하냐 안하냐는 필수 불가결 하지는 않다. 하지만… 가독성 : JSX에서는 HTML 과 유사한 구문을 사용하니, 개발자가 컴포넌…

색션 1 리액트 소개 리액트는 무엇인가? 라이브러리? 자주 사용되는 기능들을 정리해 모아둔 것 사용자 인터페이스(User Interface, UI) 사용자가 입력하는 것들 모든 것, 그리고 이러한 것들을 모아 둔 것이 UI 라이브러리 - react는 이러한 사용자 인터페이스의 컴포넌트들의 모음이다. 화면을 그리는 대표적인 UI 라이브러리들은 다음과 같다. 앵귤러(구글) 프레임워크 : 구글에서 시작 되었으나, 이젠 지원 끊김 리액트(페이스북, 메타) : 2013년 처음 출시, 가장 많이 사용되는 라이브러리 Vue.js 프레임워크 : 중국인 개발자로부터 시작한 오픈소스 프로젝트, 영향력이 커져 이제는 리액트와 함께 거론되는 대형 라이브러리가 됨. 프레임워크 vs 라이브러리 프로그램의 흐름에 대한 제어 권한이 개발자에게 있으면 라이브러리, 프로그램에게 있다면 프레임워크이다. 웹 개발의 트렌드 - 한 가지 기술이 평생 대세가 되는 구조는 아니므로, 다양하게 접근하고 관심을 가질 필요가 있…

색션 0 HTML 과 CSS JavaScript 소개 및 자료형 정식 이름은 ECMAScript 동적인 데이터들을 다룰 때 사용된다. Script Language 는 런타임때 코드의 해석이 실행된다는 특징이 있다. 현재의 표준버전 ES6(ECMASCirpt 2015, ES2015) JavaScript 의 문법 - 이미 배운 내용이기에 다 기록하진 않고, 까먹었던 부분들 위주로 정리한다. 자료형(Data Type) Dynamic Typing : 동적 타이핑이라고도 부르며, 코드가 실행되고 데이터가 담길 때 그 타입이 결정되는 방식의 언어들을 말한다. Number, String, Boolean, Null, Undefined, Array, Object Type이 존재한다. Array 타입은 다양한 타입의 데이터를 넣고 구성할 수 있고, 다양한 자료형을 하나의 배열에 함께 사용도 가능하다. Object 타입은 기본적으로 객체라고 하지만, JavaScript 에서는 키와 값으로 이루어진 쌍…