useEffect 의 deps 에 일반적인 객체를 넣을 경우 리렌더링이 발생했을 때 useEffect 가 다시 작동하게 됩니다. 헌데, useState 를 통해 선언된 객체를 집어넣었을 경우 리렌더링이 발생하지 않습니다. 왜 그런건지 조사해보도록 합니다. 우선 ref 를 통해 이전 렌더링의 값과 현재 렌더링의 값이 같은지 동치 연산자(===) 를 통해 확인했을 때는 useState 훅으로 만들어진 값은 같은 값으로 판단하고 일반적인 객체는 다른 값으로 판단합니다. useState useState – React useState – ReactThe library for web and native user interfacesko.react.dev 우선 공식문서를 확인하며 원하는 내용이 있는지 확인합니다. us..
React 의 프레임워크인 NEXT 의 app router 부분을 공식문서를 읽어가며 이해해보도록 하겠습니다. 우선 가장 먼저 Routing 부분 부터 읽어보도록 하겠습니다. Routing 해당 문서를 읽기 위해서는 아래의 용어들이 문서에서 사용되고 있다고 합니다. Tree트리는 계층구조를 시각화 하기 위한 도구입니다.예를 들어 컴포넌트의 구조라던가 폴더 구조 등이 트리의 형태를 가지고 있습니다. SubTree서브트리는 트리의 부분적인 요소를 의미합니다. Root루트는 트리나 서브트리의 첫 노드를 의미합니다.루트의 레이아웃 등이 있습니다. Leaf리프는 서브트리에서 더 이상 노드가 없을 때 리프라고 합니다.URL path 의 마지막 세그먼트가 됩니다. URL Segement슬래쉬로 나누어진 URL 의 ..
JSX ( JavaScript XML ) 란 ? JavaScript의 확장 문법으로써 리액트에서 사용할 수 있는 문법을 의미합니다. JSX는 바벨이라는 도구를 이용하여 일반 자바스크립트 형태의 코드로 변환합니다. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아닙니다. function App() { return ( Hello react ); } ===== function App() { return React.createElement("div", null, "Hello ", React.createElement("b", null, "react")); } 리액트에서는 위와 같이 작성된 문법을 아래와 같은 코드형태로 변경시킵니다. 만약 컴포넌트를 렌더링할 때마다 JSX 코드를 매..
리액트의 기본 설명에 추가적으로 Virtual DOM은 매우 중요한 내용이라 생각하기에, 한번 더 상세하게 정리해보려 합니다. React의 작동 원리에서 리렌더링을 돕기 위한 효율적인 방법으로 Virtual DOM을 사용한다고 말씀 드렸습니다. 우선 DOM이란 무엇일까 ? DOM 이란 문서 객체 모델( Document Object Model ) 의 약자로 HTML, XML 문서의 프로그래밍 interface 입니다. 쉽게 이해하자면 HTML 문서의 태그들을 JavaScript가 접근하고 이용할 수 있도록 Object의 형태로 만든 것을 DOM이라고 합니다. DOM은 위의 이미지와 같이 각 태그들의 포함 여부를 통한 부모 자식관계의 Tree 자료구조로 이루어져 있습니다. 우리는 위의 DOM Tree 정보를..
1. MVC 모델이란 ? MVC 모델은 Model_View_Controller의 약자로 Model 은 애플리케이션에서 사용하는 데이터를 관리하는 영역 View 는 사용자에게 보이는 부분 Controller 는 모델 데이터를 조회하거나 수정하고, 변경된 사항을 뷰에 반영 하는 역할을 하는 모델을 의미합니다. 여기서 React의 경우 오직 V(View)만 신경 쓰는 라이브러리 입니다. 2. Component 리액트 프로젝트에서 어떤 특정 부분이 어떻게 생길지 정하는 선언체를 컴포넌트 ( Component ) 라고 합니다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의합니다. 3. 초기 렌더링 / 리렌더링 1) 초기 렌더링 어..
오늘은 Frontend Web Framework 중 하나인 React의 설치와 실행에 대해서 알아보도록 하겠습니다 1. React.Js란 ? React는 Meta에서 제작한 Javascript Library 중 하나로서 User Interface를 만들기 위해 사용됩니다 React의 경우 JSX(Javascript XML) 이라는 특별한 문법을 사용하는데, 하나의 파일에 Javascript와 HTML을 동시에 작성할 수 있다는 특징이 있습니다 이러한 React만의 특이한 문법을 Babel을 통해 Javascript 형태의 코드로 변환시켜 줍니다 2. React의 설치 React를 설치하기 위해선 컴퓨터에 Node.js의 Package Manager인 NPM이 설치되어 있어야 합니다 Node.js (nod..
