velopert/react-tutorial-01-outdated.md

이 강좌는 outdated 되었습니다. 최신화된 포스트는 https://velopert.com/775 에서 열람하세요.
이 강좌에서는 React에 대한 간략한 정보와 특징에 대하여 알아보고, 간단한 예제를 통해 React를 사용해보도록 하겠습니다.

본 강좌는 ReactJS를 처음 배우는 JavaScript 개발자들을 대상으로 작성됐으며 앞으로 연재될 강좌를 수월하게 진행하려면, Javascript, HTML5, CSS에 대한 전반적인 지식이 필요합니다.

또한, 앞으로 사용 될 자바스크립트 문법은 ECMAScript 6 이므로, 배경지식을 알고있으면 도움이 됩니다. 허나, 이에 대해서 아직 잘 알지 못하더라도 강좌를 진행하면서 차근차근 배워나갈 예정이니 걱정하지 않으셔도 됩니다.

React는 페이스북에서 개발한 유저인터페이스 라이브러리로서 개발자로 하여금 재사용 가능한 UI를 생성 할 수 있게 해줍니다. 이 라이브러리는 현재 페이스북, 인스타그램, 야후, 넷플릭스를 포함한 많은 큰 서비스에서 사용되고 있습니다.

이 라이브러리는** Virtual DOM** 이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 유저인터페이스를 렌더링합니다. 따라서, 최소한의 DOM 처리로 컴포넌트들을 업데이트 할 수 있게 해줍니다.

케이크를 모델링한 객체가 있다고 상상해보세요. 이 객체는 케이크가 가지고있을 수 있는 모든 속성을 가지고 있습니다. 색깔, 맛, 재료, 모양, 크기, 등등등.. 그리고 이 케이크 위에 데코레이션을 한다고 상상해보세요. 위에 초콜릿을 하나 추가합니다... 그러면 React는 두가지 절차를 진행합니다. 첫째, 'diffing' 알고리즘을 사용하여 어떤부분에 변화가 있었는지 확인합니다.둘째, 'Reconcillation' (조화) 가 진행됩니다, 즉 바뀐부분만 업데이트 해줍니다. 따라서 케이크에 대한 '상태' 가 바뀌면 반죽부터 처음부터 만들어지는것이 아니라,바뀐부분만 바로바로 업데이트하게 됩니다. (비유가 적당했는지 모르겠다)

• JSX - JSX는 JavaScript의 Syntax 확장입니다. JSX를 사용하는것이 필수는 아니지만, 사용하는것이 권장됩니다. 이에 대한 자세한 내용은 다음강좌에서 다루게 됩니다.
• Components - React는 전부 Component에 대한 것 입니다. React 개발을 할땐 모든것을 Component로서 생각해야 합니다.
• 단일방향 (Unidirectional) 데이터 흐름 & Flux - React에선 데이터가 단일방향으로만 흐릅니다. 데이터 흐름을 단방향으로 제한함으로서 데이터를 추적하기 쉽고 디버깅을 쉽게 해줍니다. Flux는 데이터가 단일방향으로 흐르는것을 유지해주는 패턴입니다. ( Flux에 대해선 나중에 자세히 알아보겠습니다. )

• React는 JavaScript 객체 형태의 Virtual DOM 을 사용합니다. 이는 어플리케이션의 성능을 향상시킵니다. (JavaScript Virtual DOM 처리가 실제 DOM 보다 빠르기 때문)
• React는 클라이언트는 물론, 서버에서도 렌더링 될 수 있습니다.
• Component와 Data 패턴의 가독성이 높아 큰 규모의 어플리케이션의 유지보수하기가 쉽습니다.
• React는 프레임워크가 아닌 라이브러리입니다, 즉 다른 프레임워크와 사용 가능합니다.

• React 는 어플리케이션의 'View' 레이어만 다루므로 이 외의 부분은 다른 기술을 사용해야 합니다.
• React는 inline-template 과 JSX 를 사용하는데, 일부 개발자들에게는 적응이 안 될 수 있습니다.

작업환경을 설정하고 프로젝트를 시작하는게 정석이겠지만, 그 과정은 꽤나 복잡하여 다음 강좌로 미루고, 이 강좌의 맛보기 부분에선 간단하게 CDN에 있는 자바스크립트 파일들을 불러와서 사용해보도록 하겠습니다.

React를 사용하려면, react.js 와 react-dom 을 불러와야 합니다. (0.14.7 버전 기준)

그 아래의 babel 은 ECMAScript 6을 아직 호환되지 않는곳에서 사용하게 해주는 자바스크립트 컴파일러입니다.

13~15 번 줄이 React 코드를 작성하는 곳 입니다. 이 부분에선 그냥 자바스크립트가 아닌 jsx 를 사용하므로 type="text/babel" 로 설정된 점 주의 해주세요.

자, 간단한 HelloWorld 코드를 작성해보겠습니다.

ECMAScript 6 를 아직 모르는 분들에겐 이 문법이 생소 할 수 도 있습니다. ECMAScript 6 에서 소개된 class 에 대해서는 여기서 상세한 정보를 얻을 수 있습니다. HelloWorld 라는 컴포넌트를 만들고, 'content' id를 가진 element에 해당 컴포넌트를 렌더링하였습니다.

자, 이번엔 한번 이 컴포넌트에 name 이라는 속성을 줘보도록 하겠습니다.

• 3~5 번 줄 : 속성의 Type를 지정
• 8번 줄; 속성을 html 코드 안에서 사용할 떈 { } 괄호 사용
• 12~14번 줄: 속성의 기본값을 설정

name 값이 비면 기본값은 Velopert 이며, name 속성이 있을땐 Hello 뒤에 name 내용을 출력합니다.

React에 대하여 간단히 알아보고, 맛보기 웹페이지를 만들어봤습니다. 다음 강좌에서는 작업 환경을 설정하고 React에 대하여 좀 더 자세히 알아보도록 하겠습니다.