[React.js] React 소개(wecode)

3주차 foundation 주차이다. 드디어, React 라이브러리 세션이 시작되었고, 첫 개념에 대한 정립을 해주는 유용한 시간을 마련해주셨다.

---

🧑‍💻Session : React

1. Why React?

 

- Web Application의 발전

HTML/CSS/Javascript(DOM, Event) -> jQuery(Method 모음) -> React/Vue/Angular(Framework & Libarary)

 

- Angular, Vue (Framework)

• Angular : 2010년 Google이 개발한 Framework. Typescript 기반으로 안정적이고 기능이 많으나, 러닝커브가 높다.
• Vue : 2014년 중국 Evan You 개인이 개발한 Framework. 코드가 깔끔해고 배우기가 쉬워 성장속도가 매우 빠르다.

- React (Library)

• 2013년 Facebook에서 개발한 라이브러리. 목적은, "지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축하는 것"
• View 만을 담당한다. Framework 는 MVC(Model-View-Controller) Architecture 와의 차이점.
• 반대로, 내장된 기능이 부족해 third-party 라이브러리(React-router, Redux 등) 를 함께 사용해야 한다. (커스터마이징)
• 페이스북의 지속적인 관리로 생태계가 활성화되어 있으며, 다양한 자료 및 React Native 사용으로 꾸준히 증가중이다.

Library vs Framework

 

2. What is React?

- 정의 : 사용자 인터페이스(UI) 를 만들기 위한 자바스크립트 라이브러리

• UI를 자동으로 업데이트 해준다는 점. React는 가상돔(Virtual DOM) 과 대조로 UI를 빠르고 효율적으로 업데이트
• Component 단위로 구축. state 관리도 유용하며, React Native(모바일 앱 개발) 과의 연계성이 탁월함

3. Settings

 

- Node.js & npm

 

1) Node.js

• 자바스크립트가 브라우저 밖에서도(ex. 서버) 동작하게 하는 환경.
• 웹페이지와 직접적인 연관은 없지만, 개발에 필요한 주요 도구들(Babel, Webpack)이 Node.js 기반이라 설치 필수(npm)

2) npm(Node Package Manager)

• Node.js 설치시 npm 자동 설치된다. Node.js 기반 패키지 도구이다.

 

- CRA (Create-React-App)

리액트 프로젝트를 시작하는데 필요한 개발환경을 세팅하는 도구 (toolchain)

• 리액트는 UI 기능만 제공. 따라서 개발자가 직접 구축해야하는 것들이 많음.
• 처음 시작하는 단계에서는 직접 개발환경 구축이 어려움 -> CRA 명령어 하나로 리액트 개발환경 구축가능

1) node_modules : CRA를 구성하는 패키지들의 저장소. package.json 으로 확인가능.

 

2) public 폴더

• index.html : 기본적인 HTML 구조. <div id="root">에 <App /> 컴포넌트가 랜더링되는 것이다.
• images 폴더 : 이미지 파일들을 관리
• data 폴더 : mock data 들을 관리

3) src 폴더

• index.js : ReactDOM.render(랜더링 컴포넌트, 랜더링 위치)
• App.js : App() 함수형 컴포넌트. 실제 화면에서 표현되는 요소들로 구성되어 있는 초기 컴포넌트.
• components 폴더 : 여러 페이지에서 동시 사용되는 공통 컴포넌트 관리.(header, nav, footer 등)
• pages 폴더 : 페이지 단위 컴포넌트 폴더로 구성 (-> 하위에 Login 폴더, Main 폴더 등)
• styles 폴더 : reset.scss(CSS 초기화), common.scss(공통으로 사용하는 css 속성. font-family, theme, color..)

4) .gitignore : git 업로드 시 제외되는 목록들.

 

5) package.json : React 패키지들의 내역(종류, 버전)이 정리되어 있음. 다시 클론할 때, 이를 참고하여 패키지들을 설정할 수 있다.

 

 

4. Component

재활용이 가능한 최소 UI 구성 단위 -> 코드 재활용 증가, 유지보수 용이, 구성파악 용이

• 클래스형 컴포넌트 : render() 메소드가 있어야 하며, 내부에 표현할 JSX를 반환한다.
• 함수형 컴포넌트(React Hooks) : lifecycle, state, props 등 주요개념이 클래스형에 비해 훨씬 직관적이다.

 

5. JSX

• React 에서 사용하는 Javascript 확장 문법 (JSX는 Babel이 JS로 변환)
• 반드시 하나의 상위태그가 요소들을 감싸고 있어야 한다. (의미없는 묶음은 <> 빈 태그로 해도 된다.)
• class 는 자바스크립트 자료형으로 사용되기 때문에, className 으로 클래스명을 대체한다.
• CSS 파일은 import 로 연결이 가능하다. (import "./App.css")

- 장점 : HTML 태그를 그대로 사용하기에 익숙. 그 안에서 자바스크립트 동작도 가능. (vs Event + DOM보다 간결)

---

우선, CRA 기본세팅의 폴더 및 파일에 대한 설명을 듣게 되어 유익했다. 또한, 프로젝트 시 디렉토리 구성 방법까지 유용한 꿀팁이 많았다.

Angular, Vue 에 대해서도 간략히 알게 되었고, 항상 헷갈리는 라이브러리와 프레임워크의 재정립도 다시금 해보는 기회였다.