*React.js React 개요와 개발

*index 1. jQuery에 대해.. 2. React 개요 3. 환경 셋팅 4. 프로젝트 구조 5. 컴포넌트 개발

1. jQuery에 대해..

jQuery jQuery에 대해.. • HTML의 DOM 조작을 효율적으로 도와주는 Library DOM (Document Object Model)? • 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성 DOM을 조작한다? 1. Element를 선택한다. • id, class, tag name으로 HTML의 Element를 선택한다. • $(“ “) 2. 선택한 Element를 효율적으로 제어한다. • 선택한 Element (예를 들어, )에 속성, 새로운 element, event 등을 추가/수정/삭 제할 수 있다. • $(“ “).css( … ), $(“ “).attr( … ), $(“ “).click( … ) …

jQuery를 사용할 때의 문제점 (하나의 예시) * closest() : jQuery에서 해당 Element와 가장 가까운 Element를 선택한다. jQuery에 대해.. • jQuery에서 .closest()를 사용하는 경우 • 아래는 박스를 만들고 그 중에 하나를 클릭하면 상위 Element에 Class를 지정하는 경우이다. div ul li li li a class=“item” class=“box” Click class=“Dog” • closest(“div”)만 봐서는 무슨 의미인지 알 수 없다 → HTML 코드를 확인 해야 한다. 여기서 문제는... • 만약 개발이 끝나고, 애니메이션을 위한 div 태그를 a태그 상위에 넣자는 의견이 나온다면..?

jQuery를 사용할 때의 문제점 (그 외) jQuery에 대해.. • 그래서 개발 시 제대로 된 Convention을 정해 놓지 않으면 복잡한 코드가 될 수 있다. • 이후에 유지보수가 힘들어진다. DOM을 다루는 효율적이고 강력한 도구이다. 그래서 유지보수가 힘들다. • 이것 역시 제대로 된 convention을 정해 놓고 개발한다면 구조화된 결과물을 만들 수 있다. • ex) Javascript의 module pattern을 이용 • 하지만 구조화를 위해서 HTML을 따로 분리하고, 위와 같은 추가적인 pattern이 필요하고 관리가 쉽지 않다. 구조를 다루기 쉽지 않다. 감춰져 있는 부분 return한 요소만 외부에서 사용할 수 있다. // Hello World // “undefined” // Type error 발생 Module pattern

2. React 개요

React란? React 개요 • Facebook이 만든 UI를 위한 Javascript Library 배경 • Web에 발전에 따라 Front-end 단의 규모도 커지게 됨 • 기존에 jQuery를 많이 사용하고 있었지만, DOM을 효율적으로 다룰 뿐, 구조적인 대안이 될 수 없었다. SPA(Single Page Application)의 등장 • SPA : 서버로부터 완전한 새로운 페이지를 불러오지 않고, 현재의 페이지를 동적으로 User와 소통하는 웹 애플리케이션 • ex) Backbone과 AngularJS Request Response

View를 업데이트 한다? React 개요 • 앞서 봤듯이, 이미 MVC 기반의 프레임워크가 존재 • 데이터가 변경되면, 이를 View에 반영하여 업데이트 데이터가 변할 때 기존 뷰를 날리고 새로 렌더링한다. 위 JSON 데이터와 HTML 코드에서 likes class 부분의 2를 업데이트 한다고 하면, DOM 트리에서 해당하는 노드를 찾고, 업데이트 하는 과정을 거칠 것이다. React 개발 팀은 기존 뷰를 날리고 그냥 새로 렌더링하면 어떨까? 라는 아이디어를 제시 -> 하지만 이것은 브라우저의 성능과 메모리를 많이 차지

React의 특징 * DOM(Document Object Model) : 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다. React 개요 • 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용 (DOM의 가벼운 사본) Virtual DOM 이전 DOM 트리 새로운 DOM 트리 업데이트 될 DOM 노드 • React에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때 다음 3가지 절차를 거친다. 1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링 2. 이전 Virtual DOM에 있던 내용과 현재 내용 비교 3. 바뀐 부분만 실제 DOM에 적용

오직 View만 신경 쓰는 Library React 개요 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환하는 템플릿과 달리, React는 컴포넌트(Component)라는 것을 사용하여 렌더링한다. 컴포넌트(Component)? • React에서 특정 부분이 어떻게 생길지 정하는 선언체로, 재사용이 가능한 API로 수많은 기능들을 내장하고 있다. • 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의 렌더링(Rendering)? • 사용자 화면에 View를 보여주는 것 React는 ‘초기 렌더링’과 ‘조화 과정’을 통해 성능을 아낀다. 렌더링 HTML 마크업 DOM 주입 1. 초기 렌더링은 Component의 render 함수를 통해 시작된다. render() 2. HTML 마크업에 필요한 데이터와 함께 DOM에 주입한다. 3. DOM을 화면에 그림으로써 사용자에게 보여준다. 4. 만약 데이터의 변화가 생길 경우 조화 과정을 거쳐 리렌더링 한다. 리렌더링

React는 Framework이 아닌 Library이다. React 개요 • React는 View만 신경 쓰는 Library이다. • 즉, 서버 통신을 위한 Ajax, 다른 컴포넌트 사용을 위한 Routing, 데이터 모델링 등과 같은 기능이 없다. • 직접 구현해야 한다. • 가볍기도 하고(성능이 좋다) 다른 Framework 또는 Library와 같이 사용할 수 있다는 장점 그럼 React가 jQuery보다 좋은 건가? React를 사용하면 무조건 빠르다!? 우리는 다음 문제를 해결하려고 리액트를 만들었습니다. “지속적으로 데이터가 변화하는 대규모 어플리케이션 구축하기” React 매뉴얼 중.. 그럼 jQuery 대신 React를 쓰는 이유? • 언급했듯이, 규모가 커짐에 따라 데이터 변화에 따른 View 업데이트의 간결성 • 컴포넌트의 재사용성 • 모듈화 등의 이점이 있기 때문에 사용한다. • React가 jQuery보다 좋다는 것은 오해다. • 오히려 jQuery가 생산성이나 성능이 더 우수할 수 있다. • 사실 React는 View를 위한 Library이기 때문에 DOM을 핸들링하는 jQuery와 좋다/나쁘다를 비교하는 것은 무의미하다.

React와 jQuery 비교 React 개요 Todo App을 jquery와 react로 각각 제작해보고 느낀 점(?) React jQuery • 확실히 jQuery가 React보다는 생산성이나 코드 양이 적다. • 하지만 쉽게 DOM을 제어하는 로직을 짜다 보니, 모듈별로 분리하기가 애매했다. • 작은 사이즈의 프로젝트에서는 jQuery로 하는 것이 좋을 것 같고, 큰 사이즈에서는 React와 같은 라이브러리나 프레임워크를 사 용하는 것이 이후 유지보수 면에서 좋을 것 같다.

3. 개발환경 셋팅

Tool 개발환경 셋팅 • VScode (IDE) : Code 편집 Tool • Yarn (Package Manager) : 개발 시 다양한 node package를 다운받아 사용하는데, package의 dependency를 관리하고, 추가/삭 제하는데 쓰이는 Tool https://classic.yarnpkg.com/en/ https://code.visualstudio.com/

ESLint와 Prettier 설정 – extension 설치 개발환경 셋팅 • Coding Rule(규칙)이나 Formatting(코드 정리)을 save 할 때, 자동으로 맞춰주게 하기 위한 설정 • 프로젝트 생성 후 진행하기를 권장 • VS Code의 Extension을 설치한다. Prettier ESLint

ESLint와 Prettier 설정 – 규칙 Customizing 개발환경 셋팅 • ESLint와 Prettier의 세부적인 rule을 정의 • 프로젝트의 package.json 파일에서 설정 • extends : airbnb의 규칙과 prettier 적용 • parser : ES6의 arrow function을 사용하기 위해 추가 • rules : 세부 규칙을 커스터마이징 하기 위해 정의 • env : document.~” 사용하기 위해 추가

ESLint와 Prettier 설정 – 기본 Javascript 포매팅 기능 비활성화 개발환경 셋팅 • File - Preferences - Settings • "Format JavaScript" 검색 - Javascript > Format: Enable 체크해제

ESLint와 Prettier 설정 – Prettier 설정 개발환경 셋팅 • 프로젝트 루트 디렉터리에 .prettierrc 파일 생성 및 편집 • 다른 Option들은 https://prettier.io/docs/en/options.html에서 확인 가능하다.

ESLint와 Prettier 설정 – 코드 저장 시, 자동 포맷팅 설정 개발환경 셋팅 • File - Preferences - Settings • "format on save" 검색 - Editor: Format On Save 체크 • "ESLint" 검색 - Eslint: Auto Fix On Save 체크

4. 프로젝트 구조

CRA로 프로젝트 생성 프로젝트 구조 • CRA(Create React App) React 프로젝트를 생성할 때 필요한 Webpack, Babel의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해 주 는 도구 • yarn을 사용한다면 • $ yarn create react-app • yarn을 사용하지 않는 경우(npm 사용) • $ npm init react-app 생성하면 오른쪽 화면과 같은 프로젝트 구조가 생성된다. • src 폴더 하위에는 기본적인 파일들만 구성되어 있다. • App.js, App.css • index.js, index.css • serviceWorker.js • … • 좀 더 구조적으로 컴포넌트를 관리하기 위해서는 개선이 필요

Atomic Design 프로젝트 구조 “화학(Chemistry)”에서 아래와 같은 경우를 생각해보자. 원자(atoms) < 분자(molecules) < 유기체(organisms) Atomic Design은 마찬가지로 인터페이스도 여러 작은 컴포넌트로 쪼갤 수 있다는 원리이다. 인스턴스화

Atoms 프로젝트 구조 • HTML 태그 수준의 요소라고 생각하면 된다. • ex) label, input, button …

Molecules 프로젝트 구조 • 여러 개의 Atoms로 구성된 것 • 위에서 언급한 label, input, button 등 Atoms는 따로 사용될 때는 그리 유용하지 않다. • Atoms를 결합해서 사용할 때 비교적 의미 있는 요소가 된다. Organisms • 여러 개의 Molecules로 구성된 것 • ex) logo, navigation search form, social media channel이 합쳐진 구성

Templates 프로젝트 구조 • Templates 단계까지 왔다면, 어느 정도 최종 완성본에 가깝다. • 여러 개의 Organisms로 구성된 것 • HTML의 Wireframe(뼈대)라고 생각하면 된다. Pages • Template의 인스턴스 • Template의 Contents 부분이 실제 User가 볼 수 있는 것들로 채워진다.

5. 컴포넌트 개발

Dumb Component와 Smart Component 컴포넌트 개발 • Smart component 또는 Container라고 불림 • 앱의 상태(Redux state)를 제어하는 역할 • Redux의 store 접근은 오직 container를 통해서만 이루어진다. • Dumb component 또는 Presentional component라고 불림 • 상위 component로부터 props를 전달받아 보여주는 역할 Container(smart component) Component(dumb component) Atomic Design 적용 모습

Reducer Redux? 컴포넌트 개발 ”Redux의 Store 접근은 오직 Container를 통해서만 이루어진다.” Store Action dispatch subscribe 구성 요소 • Store: 애플리케이션의 state 값들을 저장하고 있다. • Action: state 변화를 일으킬 때 참조하는 객체 • Dispatch: Action을 Store에 전달하는 과정 • Reducer: State를 변화시키는 로직이 있는 함수 • Subscribe: Store의 state 값이 필요한 컴포넌트는 store를 구독한다. React state 관리 라이브러리 state 업데이트 관련 로직을 다른 파일로 분리하여 관리 가능 Component끼리 같은 state를 공유해야 할 때도 여러 Component를 거치지 않고 쉽게 전달하거나 업데이트 가능

Ducks 파일 구조 컴포넌트 개발 액션 타입, 액션 생성 함수, 리듀서를 모두 한 파일에서 모듈화 하여 관리하는 방식 store-modules-base.js Action의 타입을 정의 정의한 Action 타입에 따라 함수(dispatch)를 생성하고, Component 파일 내에서 이 함수를 호출하여 사용 초기의 state Reducer 부분이다. dispatch된 Action에 대해 비즈니스 로직을 수행 실제 state를 조작하는 부분

Mounting 과정 소개 컴포넌트 개발 React의 실행 순서는 Entry Point인 index.js에서 시작한다. • Proivder는 Redux Store와 연결하는 부분이다. • BrowserRouter는 여기서 다루지 않지만, Routing을 위해 추 가한 부분 • Entry Point에 App 컴포넌트가 붙게 되고 • App 컴포넌트 하위에 있는 여러 컴포넌트가 붙는다. • (Atomic Design으로 구성한 컴포넌트들이 될 것이다.) • 각 컴포넌트들은 LifeCycle을 기반으로 동작한다.(뒷장에 계속)

Component의 Lifecycle(생명주기) 컴포넌트 개발 Lifecycle ? 컴포넌트가 생성되어, 사용되고 소멸될 때까지의 일련의 과정 총 세 가지 분류로 나뉜다. 마운트, 업데이트, 언마운트

마운트(Mount) 컴포넌트 개발 DOM이 생성되고 웹 브라우저 상에 나타나는 것 • 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 constructor getDerivedStateFromProps render componentDidMount • props에 있는 값을 state에 넣을 때 사용하는 메서드 • 우리가 준비한 UI를 렌더링하는 메서드 • 컴포넌트가 웹 브라우저 상에 나타난 후 호출하는 메서드

업데이트(Update) 컴포넌트 개발 컴포넌트가 업데이트 되는 경우는 아래 네 가지 경우다. 1. props가 바뀔 때 2. state가 바뀔 때 3. 부모 컴포넌트가 리렌더링될 때 4. this, forceUpdate로 강제로 렌더링을 트리거할 때 • 컴포넌트의 업데이트 작업이 끝난 후 호출 • 마운트 과정과 업데이트 과정 모두 호출된다. • props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용 • 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정 • true 또는 false 반환하는데, false를 반환하면 작업을 중지한다(컴포넌트가 리렌더링하지 않는다) • 특정 함수에서 this.forceUpdate() 함수 호출하면 이 과정을 생략하고 바로 render 함수 호출 • 컴포넌트를 리렌더링 • 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출 getDerivedStateFromProps shouldComponentUpdate render getSnapshotBeforeUpdate componentDidUpdate

언마운트(Unmount) 컴포넌트 개발 마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것 • 컴포넌트가 웹 브라우저 상에서 사라지기 전에 호출 componentWillUnMount

Component 생성 Tool & 생성 컴포넌트 개발 • 위 확장자나 템플릿은 수정 가능 • VSCode에는 Component와 Container를 Template 기반으로 생성해주는 Tool을 제공 • 위 파일은 Container를 생성한 그림

Component 생성 Tool & 생성 컴포넌트 개발 • Button 컴포넌트 • (사실 “추가” 부분도 Props로 처리해줘야 한다.) • Button 컴포넌트를 사용하는 부분

Thank you!! *