[Chapter 3-1] 3주 차 회고 - React 입문

시간이 참 빠르다.. 2주 차 회고를 쓴 지가 엊그제 같은데 벌써 일주일이 지났다. 3주 차부터 시작된 주특기 주차는 각자 선택한 주특기를 학습하고 숙련도를 올리는 기간이다.

 

나는 자바스크립트의 라이브러리 중 하나인 React를 선택했는데, 개발을 하면 너무 재밌어서 시간이 빨리 가고 매일 시간이 부족하다. 에러를 해결했을 때 오는 작은 성취감부터 해서 작지만 내 손으로 내 마음대로 만든 웹 애플리케이션을 보면 그렇게 뿌듯하지 않을 수가 없다.

 

하지만 요즘 블로그에 글도 안 올리고 너무 코딩만 즐기는 느낌이다. 앞으로는 블로그에 글도 꾸준히 올리면서 개발도 해야겠다.

 

 

입문 주차에 학습한 내용 몇 가지

---

자바스크립트에서 유사 배열과 배열의 차이

유사 배열은 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다.

 

배열같이 생겼지만 사실 객체다. 이 유사 배열 객체와 일반 배열에는 중요한 차이가 있는데 map, filter, reduce 같은 배열 메서드를 사용할 수 없다는 것이다.

 

유사 배열의 요소를 수정하려면 Array.from() 메서드를 사용하면 된다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Array.from() - JavaScript | MDN

리액트에서는 상태 값에 대한 불변성을 지켜줘야 하기 때문에, 원본 데이터를 변경해서는 안된다. 숫자나 문자와 같은 원시 값은 불변성을 가지고 있어 새로운 값을 할당해도 기존 값은 유지하고 다른 메모리에 새로운 데이터를 만들지만, 배열은 원본 데이터가 변경될 수 있기 때문에 map, filter, reduce와 같은 배열 메서드로 완전히 새로운 배열을 만들어 사용해야 한다.

 

 

CRA(Create React App)

React로 개발 프로젝트를 바닥부터 시작하려면 웹팩(Webpack)이나 바벨(Babel) 등 초기 설정이 매우 복잡해 입문하기에 번거로움이 있다. React는 각종 개발 편의 도구가 포함된 프레임워크가 아니라, 어느 프로젝트에서나 추가해서 쓸 수 있는 가벼운 라이브러리에 가깝기 때문에 프로젝트를 시작하려고 하면 쉽지 않은 것이다.

 

그래서 React를 만든 메타(과거 페이스북)에서는 React 웹 개발용 Boilerplate인  Create React App을 만들었다. Create React App은 프로젝트를 쉽고 빠르게 만들 수 있도록 도와주는 CLI(커맨드 라인 인터페이스) 도구이다.

https://create-react-app.dev/

Create React App

CRA의 사용 방법은 공식 사이트에 잘 안내되어있다.

npx create-react-app my-app

 

 

리액트 컴포넌트란? (React Component)

Component는 앱을 이루는 최소한의 단위로, props나 state와 같은 데이터를 입력받아 DOM 노드를 생성한다. 
props - 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다.
state - 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.

 

리액트 훅이란? (React Hook)

Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.

• 클래스형 컴포넌트에서만 쓸 수 있었던 state와 Life Cycle을 함수형 컴포넌트에서도 사용이 가능하다
• Hook은 브라우저의 메모리 자원을 사용하기에 함부로 남발하면 오히려 성능 저하를 불러올 수 있다.
• Hook은 React 함수(컴포넌트)의 최상위에서만 호출이 가능하다.
• Custom Hook을 만들 수 있으며, 이름 앞에 use를 붙여야 한다. ex) useFetch

 

리액트에서 배열 메서드 사용 시 key값이 필요한 이유

리액트에서 map을 사용하여 컴포넌트를 반복 렌더링 할 때는 반드시 컴포넌트에 key 값을 넣어줘야 한다. key 값을 넣지 않으면 오류가 발생한다.

  <div>
      {todos.map((todo) => {
        return <Todo todo={todo} key={todo.id} />;
      })}
  </div>

key가 필요한 이유는 React에서 컴포넌트 배열을 렌더링 했을 때 각각의 원소에서 변동이 있는지 알아내려고 사용하기 때문이다.

 

만약 key가 없다면 React는 가상 돔을 비교하는 과정에서 배열을 순차적으로 비교하면서 변화를 감지한다. 하지만 key가 있으면 이 값을 이용해서 어떤 변화가 일어났는지 더 빠르게 알아낼 수 있게 된다. 그래서 key값을 넣어줘야 React의 성능이 더 최적화된다.

 

 

DOM이란?

문서 객체 모델(The Document Object Model) 은 HTML, XML 문서의 프로그래밍 interface이다.

 

DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

 

DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

 

가상 돔(Virtual DOM)

가상 돔(Virtual DOM)은 실제 DOM 문서를 추상화한 개념으로, 변화가 많은 View를 실제 DOM에서 직접 처리하는 방식이 아닌 Virtual Dom과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화하는 프로그래밍 개념이다.

 

 

서버리스(serverless)란?

직역하면 서버가 없다는 뜻이지만, 서버를 직접 관리할 필요가 없는 아키텍처를 뜻한다. 즉, 개발자가 서버를 관리할 필요 없이 애플리케이션을 빌드하고 실행할 수 있도록 하는 클라우드 네이티브 개발 모델이다.

 

서버리스의 장단점

- 장점

• 이벤트 기반의 비용 (일정 주기, 조건 등에 함수를 호출하므로 리소스를 낭비하지 않아 비용이 저렴)
• 인프라 구성, 운영, 보안 등에 신경쓰지 않고 비즈니스 로직에 집중할 수 있다.
• 자동 스케일 업 및 스케일 다운
• 간단한 패키징 및 배포
• 릴리즈 주기 감소
• 높은 생산성

 

- 단점

• 실시간 서비스에는 적합하지 않다. (항시 실행 중인 서버랑 달리, 트리거에 의해 서버를 실행하고 종료하기를 반복하기 때문에 실행 대기 시간이 오래 걸림)
• 클라우드 서비스 업체에 종속적이다.
• 마이그레이션이 어렵다.
• 실행 시간 한계 (AWS Lambda의 경우 15분)
• 로컬 데이터를 사용할 수 없다. (Stateless)
• 디버깅이나 테스팅에 불편하다.

---

하루하루 리액트에 대한 개념이 잡히는 게 체감된다. 하지만 아직 갈길이 너무 멀어서 지난 시간보다 앞으로 더 열심히 해야겠다.