리액트강좌4 리액트 강좌4 - 컴포넌트 리액트에서 컴포넌트는 가장 큰 장점 중 하나이며, 리액트를 쓰는 가장 큰 이유이기도 합니다. 컴포넌트는 단순한 템플릿 이상이라고 표현합니다. 쉽게 재 사용이 가능할 뿐만 아니라 라이플 사이클 API를 통해서 작업들을 처리할 수 있으며, function 또는 method 등을 이용해서 화면을 정의할 수 있습니다. 무엇보다도 기능 단위 또는 화면 단위로 컴포넌트를 관리할 수 있어서 관리도 수월하며, 한 파일에 모두 작성하지 않아도 되어, 코드 작성 시 가시성이 좋습니다. 1. 컴포넌트 생성 그럼 이제 간단한 컴포넌트를 생성하는 실습을 해보도록 하겠습니다. 어떠한 편집기를 사용해도 상관 없지만, 필자는 Visual Studio Code를 사용하였습니다. 그럼, 아래 그림과 같이 src/sample 하위에 오른.. 2020. 2. 13. 리액트 강좌3 - JSX 요번 강좌에서는 자바스크립트의 확장형인 JSX에 대해서 알아보도록 하겠습니다. 또한, JSX에서 사용하는 조건부 연산과 자바스크립트 표현에 대해서 간략하게 살펴보겠습니다. 1. 코드 이해 Node.js의 주요 특징은 코드를 모듈화하여 재사용할 수 있다는 것입니다. Node의 내장된 모듈을 사용하거나, 자신의 코드를 모듈화 하여 재사용할 수 있습니다. 또한 남들이 만든 모듈도 npm 을 이용해서 쉽게 적용할 수 있습니다.이렇게 설치된 모듈은 import라는 키워드를 사용해서 불러와서 사용할 수 있습니다. 하지만 이는 Node.js의 기능이기 때문에 자바스크립트에서 이 기능을 지원하지 않습니다. 이러한 기능을 사용하기 위해서는 번들링(bundling) 도구를 이용해야 합니다. 번들은 파일을 묶는다는 의미로 .. 2020. 2. 10. 리액트 강좌2 - 개발환경 구성 1. 프로젝트 생성 실습에 앞서 간단한 프로젝트를 생성해보겠습니다. 프로젝트는 create-react-app 도구를 이용해서 생성할 수 있습니다. create-react-app도구는 npm 또는 yarn 으로 설치 할 수 있습니다. yarn 설치 시 global(전역)으로 설치하시면 됩니다. $ yarn global add create-react-app create-react-app 이 설치가 완료되면 아래 명령어로 프로젝트를 생성할 수 있습니다. 명령어 형태는 create-react-app 입니다. $ create-react-app hello-react Creating a new React app in /Users/jeon-mac/Documents/dev/git/study-project/reactJS/.. 2020. 2. 4. 리액트강좌1 - 리액트의 개념과 이해 이전에는 자바스크립트는 웹 사이트에 뷰를 표시하거나 간단한 연산을 위한 언어였습니다. 하지만 현재는 웹 애플리케이션은 핵심적인 역할을 하고 있으며, 서버 사이드는 물론 모바일, 데스크톱 애플리케이션에서도 확장되었습니다. 오늘은 이러한 리액트에 대한 간단한 개념에 대해서 알아보도록 하겠습니다. 자바스크립트를 기반을 두고 있는 AngularJS, Backbone.js,Vue.js 등 다양한 프레임워크들이 있습니다. 이러한 프레임워크들은 MVC(Model-View Controller), MVVM(Model-View-View Model), MVW(Model-View-Whatever) 등의 아키텍쳐를 사용하고 있습니다. 이러한 아키텍쳐들은 데이터 관리 영역인 모델과 유저에게 표시되는 뷰로 나뉩니다. 즉, 데이터가.. 2019. 12. 11. 이전 1 다음
