1. React란?
사용자 인터페이스(UI)를 만들기 위한 JS라이브러리
2. React가 나온 이유
웹브라우저가 3세대로 넘어오면서 애플리케이션의 규모가 커지고 다양한 UI/UX를 구현하게 되었다. 기존의 DOM, JQuery로는 이런 방대한 양의 애플리케이션을 개발하고 유지보수하기가 어려워졌다. 지금 하고 있는 간단한 프로젝트에서도 DOM요소를 직접 접근해서 조작하기 어려웠으니 당연한 변화인 것 같다.
이러한 문제로 나온 가장 대중적인 라이브러리와 프레임워크는 React, Angular, Vue가 있다.
3. React의 특징
3-1. 선언적
기존의 웹 프로그래밍은 View를 구성하는 DOM객체에 직접 접근해서 데이터를 보여주거나 View의 상태를 가져와서 로직을 처리하는 등 일일이 수행하여 명령을 기술하는 방식이였다.
하지만 선언적 방식은 DOM 요소의 클래스 속성을 바꾸려고 하는 경우 직접 명령을 보내지 않는다. 대신에 UI와 Component 사이에 관게를 선언한다. 선언에 따라 속성은 자동으로 업데이트 되고 UI도 자동으로 업데이트 된다.
청소를 하는 것에 예를 들어보겠다.
절차적으로 표현하면,
- 청소기를 돌린다.
- 빨래를 돌린다.
- 걸레질을 한다.
- etc..
이렇게 목적을 이루기 위해서 '어떻게'라는 측면에 맞추는 것이 절차적 방식의 특징이다.
선언적으로 표현하면,
- 깨끗해진 방의 모습을 상상해서 그림을 그린다.
- 로봇에게 그림을 전달한다.
선언적은 무엇이 되면 되는지 원하는 최종결과물의 모습을 선언하는 것을 볼 수 있다.
우리가 원하는 모습을 선언하고 리액트에 전달하면 그것을 만들기 위해 어떻게 해야 하는지에 대해서는 리엑트가 알아서 다 처리해주므로 우리는 최종결과물이 어떻게 생기면 되는지만 신경쓰면 된다.. 즉 편리성이 높아진다.
또한 문제가 생겨 디버깅을 할 때도 절자척 방식은 모든 절차를 다 짚어봐야하지만, 선언적 방식은 선언한 모습이 기대한 모습과 어떤 부분이 다른지만 파악하면 되기 때문에 편리성 뿐만 아니라 유지보수성도 좋다.
3-2. JSX
JS의 확장버전으로서 마크업을 편리하게 작성하고자 나온 문법이다. 원래는 Html에서 마크업을 작성하고 Javascript에서는 로직을 작성했는데 이 JSX를 사용하면 이 과정을 하나의 Javascript 파일안에서 해결할 수 있다.
특징으로는 속성을 주고 싶을때는 ""로 감싸야하고, class을 주고싶을 때는 기존처럼 class="이름"이 아니라 className="이름"으로 선언해야한다.
또한 어떤 태그라도 Self closing tag가 가능하다.
3-3. Component
컴포넌트는 재활용 가능한 UI구성 단위라고 한다.
쉽게 설명하면 독립적으로 재사용가능한 코드를 따로 놔둔 꾸러미?같은 느낌인것 같다. 때문에 코드의 재활용성,유지보수성을 높일 수 있고 해당 페이지가 어떻게 구성되어있는지 잘 파악할 수 있게 한다.
3-4. Virtual DOM
브라우저 화면에 변화를 주기 위해서는 DOM의 조작이 필요하다. 브라우저는 DOM의 조작이 발생할 때 마다 화면의 배치를 잡는 과정인 Layout과 화면에 색을 입히는 과정인 Paint를 거치게 된다.
매번 DOM 조작을 할 때마다 이러한 과정을 반복해야하므로 매우 비효율적이다.
이를 해결하고자 react는 가상의 DOM을 하나 만들어서 화면을 바꿔야할 경우에 화면을 바꾸기 위한 DOM의 조작을 Virtual DOM을 통해서 개선한다. 그리고 실제 브라우저에 있는 DOM은 한번의 변경만 발생시킨다.
3. Library, Framework
둘다 다른사람들이 만들어낸 코드지만 두개의 차이점이 있다.
Framework는 다른 사람들이 만들어낸 틀(Frame)안에 들어가서 작업하는 것이다.
Framework에는 Vue, Angular가 있다.
Library는 내 작업에 다른 사람이 만들어 둔 코드를 가져와서 사용하는 것이다.
React가 이 방식이다.
React를 사용하는 이유는 가장 대중적으로 사용하기 때문이다. 시간이 지나 다른 대중적이고 인기있는 라이브러리나 프레임워크가 나온다면 그것을 또 배워야하지 않을까 싶다.
4.작업환경 설정
4-1. Node.js
Node.js 란?
자바스크립트가 브라우저 밖(ex.서버)에서도 동작하게 하는 환경을 의미한다.
React는 브라우저에서 실행되는 코드인데 왜 Node.js를 설치해야할까?
: Node.js를 설치하면 프로젝트를 개발하는데 필요한 도구들(바벨,웹팩)를 쓸 수 있기 때문에 반드시 설치해야한다.
4-2. npm(node package manager)
npm 이란?
Node기반의 패키지를 사용하려면 이 패키지 도구가 필요하다. 이 npm으로 다양한 패키지를 설치하고 버전을 관리할 수 있다.
4-3. CRA(Create React App)
CRA 이란?
react 프로젝트를 시작하는데 필요한 개발 환경을 setting 해주는 도구이다.
리엑트는 UI기능만 제공하기 때문에 개발자가 직접 구축해야하므로 신경쓸 것이 많은데 처음 시작하는 단계에서 직접 개발환경을 구축하기 어려울 수 있. 이를 해결하고자 리엑트 팀에서 제공한 것이 이 CRA이다. 하나의 명령어로 개발환경을 구축할 수 있다.
