React
-
2022.08.07 Section 4 useMemo, useCallbackReact 2022. 8. 7. 03:11
useMemo 시작하기에 앞서 컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링 될 때마다 리렌더링을 하는 구조로 이루어져 있는데 너무 잦은 리렌더링은 앱에 좋지 않다는 것을 전에 블로깅한 적이 있다. React Hook은 함수 컴포넌트가 상태를 조작 및 최적화 기능을 사용할 수 있게 만드는 메소드이며 그 중 렌더링 최적화를 위한 Hook도 존재하는데, useMemo와 useCallback이 바로 그 역할을 해주는 Hook이다. useMemo란? useMemo는 특정 값(value)를 재사용하고자 할 때 사용하는 Hook이다. function Calculator({value}){ const result = calculate(value); return {result} ; } 해당 컴포넌트는 p..
-
2022.08.05 Section 4 Virtual Dom, React Diffing AlgorithmReact 2022. 8. 5. 02:26
Virtual Dom 나오게 된 배경 Virtual DOM은 Real DOM의 가벼운 사본과 같다. 저번에 배웠던 DOM을 Real DOM 이라고 부르는 이유는 Virtual DOM과 구분하기 위해서이다 ! Real DOM (DOM) Virtual DOM이 나오게 된 배경을 보기 전에 DOM의 개념을 다시 정리해 보자면 DOM은 Document Object Model의 약자로 문서 객체 모델을 의미하는데 여기서 문서 객체란 브라우저가 JavaScript와 같은 스크립팅 언어가 , , 와 같은 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨 것을 의미한다. 한마디로 DOM은 브라우저가 트리 구조로 만든 객체 모델 이렇게 트리 구조로 DOM 객체가 이뤄져 있기에 JS는 쉽게 DOM 객체..
-
2022.08.01 Section 4 번들링과 웹팩React 2022. 8. 2. 03:14
번들링과 웹팩 번들링이란? 사용자에게 전달할 파일을 묶어주는 과정 웹팩이란? 여러개의 파일을 하나의 파일로 합쳐줌 HTML, CSS, JS 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링하는 도구 웹팩의 필요성 가장 큰 이유는 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서이다. 웹페이지를 구성하는 코드의 양이 많은 것을 “무겁다”라고 표현하는데 이것이 무거울수록 웹 페이지의 로딩 속도와 성능은 저하가 되기에 일반적으로 유저는 하나의 웹사이트에 접근하는 순간부터 3초 이내에 웹페이지가 뜨지 않으면 굉장히 많은 수가 더는 기다리지 않고 이탈을 선택하기 때문이다. 1. entry 코드의 시작점 module.exports = { ... entry: "./src/index.js"..
-
2022.07.07 Section 3 - Unit 4 - ReduxReact 2022. 7. 7. 23:40
Redux 컴포넌트가 많을수록 복잡해지는 상태(State)를 관리하는 라이브러리 Redux의 3가지 원칙 1. 하나의 어플리케이션 안에는 하나의 store만 가능 2. state값은 무조건 읽기 전용 3. Reducer는 반드시 순수함수로만 가능하며 항상 똑같은 값을 내보내야 함 React / Redux 차이점 React : 상태와 속성(props)을 이용한 컴포넌트 단위 개발 아키텍처 사용 Redux : 컴포넌트와 상태를 분리하는 패턴을 사용한다. 그동안 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있었는데 상태 변경 로직을 컴포넌트로부터 분리하여 보다 단순한 함수 컴포넌트로 만들 수 있게 되었다. 컴포넌트 3과 컴포넌트 6에만 사용되는 상태를 기존 React의 데이트 흐름에서는 ..
-
2022.07.05 Section 3 - Unit 3 - Custom ComponentReact 2022. 7. 5. 00:25
CDD Component Driven Development (CDD) 1. 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발방식 2. 재사용할 수 있는 컴포넌트 개발 가능 3. 상향식 개발에 가까움 Styled Components CSS 코드를 다룰 때 다음과 같은 고민을 한 적이 많을 것이다. 1. class, id 이름짓는 고민한 적 2. CSS 파일 안에 내가 원하는 부분 찾기 힘들었던 적 3. CSS 파일이 너무 길어져서 파일을 쪼개 관리해본 적 4. 스타일 속성이 겹쳐서 원하는 결과물이 도출이 안된 적 이런 불편함을 CSS를 컴포넌트화 시킴으로써 해결해주는 라이브러리가 있다. 바로 React 환경에서 사용 가능한 Styled Components 라는 라이브러리이다. ..
-
2022.06.14 Unit9 - [React] 클라이언트 Ajax 요청React 2022. 6. 14. 22:54
1-1 React 데이터 흐름 1. React 개발 방식의 특징은 페이지 단위가 아닌 컴포넌트 단위 !! 2. 데이터는 위에서 아래로 흐르며 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 전달인자(arguments) 또는 속성(attributes)처럼 전달받을 수 있음 !! 3. 데이터를 전달하는 주체는 부모 컴포넌트가 되며 이는 데이트 흐름이 하향식(Top-Down)임을 의미 (단방향 데이터 흐름) 1-2 State 끌어올리기 단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있고 데이터가 state로부터 왔는지, 하드코딩으로 입력한 내용인지는 알지 못한다. 그러므로 하위 컴포넌트에서의 어떤 이벤트로 인해..
-
2022.06.07 ~ 06.08 Unit6 - [React] React State & PropsReact 2022. 6. 8. 21:15
React State & Props State state는 컴포넌트 내부의 동적 데이터를 의미한다. props는 부모 컴포넌트가 설정하는 값으로 컴포넌트 자신은 props를 읽기 전용으로만 사용할 수 있다. state를 사용하는 방식에는 컴포넌트의 종류에 따라 2가지가 있다. 클래스형 컴포넌트에서는 컴포넌트 자체가 state를 지니는 방식으로 사용한다. 함수형 컴포넌트에서는 useState라는 함수, Hook을 통해 사용한다. 여러 개의 자식으로부터 데이터를 모으거나 두 개의 자식 컴포넌트들이 서로 통신하게 하기 위해서 조상 컴포넌트에 state를 정의한다. 조상 컴포넌트가 props를 사용하여 자식 컴포넌트에 state를 다시 전달함으로 서로 동기화한다. 두 컴포넌트 간 state 값을 동기화하는 일,..
-
2022.06.03 Unit5 - [React] React SPAReact 2022. 6. 4. 03:01
SPA의 개념, 장단점 장점 1. 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 화면 되기 때문에 사용자와의 Interaction에 빠르게 반응 2. 서버에서는 요청 받은 데이터만 넘겨주면 되기에 서버 과부하 문제가 현저하게 줄어든다. 3. 전체 페이지를 렌더링 할 필요가 없기에 더 나은 유저경험을 제공 단점 1. SPA의 경우 JavaScript 파일의 크기가 커서 JavaScript 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어진다. 2. 검색 엔진 최적화(SEO)가 좋지 않다. 구글, 네이버 같은 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동한다. 하지만 SPA의 경우 HTML 파일은 별다른 자료가 없어서 검색 엔진이 적절히 동작하지 못..