윈도우 로컬 환경에서 React 를 활용한 반응형 앱을 만들기 위해서는 크게 4가지 단계를 거치면 됩니다. 1. 노드를 설치 2. 개발 툴 설치 (Visual Studio 등..) 3. React App 생성 4. App을 실행 (1) 노드 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 노드 사이트에서 최신 버전의 node.js 를 받아줍니다. LTS 버전을 다운받아 설치하면 됩니다. (2) 개발 툴 설치 (Visual Studio Code) https://code.visualstudio.com/download Download Visual St..

React 를 컴포넌트로 관리하게 될 때 컴포넌트로 만든 js 파일이나 렌더링할 내용이 있는 jsx 파일을 사용하려면 export를 해주어야 하고, 그 컴포넌트를 사용하는 파일에서는 import 를 시켜주어야 합니다. 이 export와 import를 사용하는 방법을 조금 더 알아보겠습니다. 단일 Export / Import math.js const pi = 3.1415962; export default pi; index.js import React from "react"; import ReactDOM from "react-dom"; import pi from "./math" ReactDOM.render( {pi} , document.getElementById("root") ); 컴포넌트인 math.js ..

React 의 가장 큰 장점 중 하나는 컴포넌트를 사용한 깔끔한 프로젝트 구성과 관리 효율성이 있습니다. 하나의 파일 안에 필요한 모든 코드를 넣는 것이 아니라 필요한 기능들과 input 되어져야 될 파일들을 따로 구분시켜 필요할 때마다 해당 기능들을 가지고 있는 컴포넌트 파일만을 간편하게 import 해서 사용하는 것입니다. 단일 컴포넌트 파일을 만들어 놓기만 해도 원할 때마다 재사용하여 구성할 수 있습니다. 이 컴포넌트를 어떻게 사용하고 구성하는지에 대해 예시 코드로 테스트해보며 정리해보겠습니다. 기존의 React 파일 구성 index.js import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( My Favourite..

JSX 문법에 스타일링 하는 것은 기본 Javascript와 다르지 않습니다. 다만 약간의 차이점이 있을 뿐입니다. JSX 문법에 스타일링 하는 방법에 대해서 간단하게 알아보겠습니다. 기본 스타일링 index.html index.html 에는 React JSX 를 import 하고 있습니다. 여기서 일반 Javascript를 import 하는 것이라면 type을 "text/javascript" 라고 했겠지만, JSX 이기 때문에 type은 "text/JSX"입니다. index.js import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( My Favourite Foods Bacon Jamon Noodles , documen..

JSX란 Javascript를 확장한 문법입니다. React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 렌더링 예시 코드 index.html index.js // React 렌더링을 사용하기 위해 React, React Dom 디펜던시 import // import 방법 1 import React from "react"; import ReactDom from "react-dom"; // im..

React는 Angular, Vue를 비롯한 많은 프레임워크 중에서 가장 많이 사랑받는 프론트엔드 웹 프레임워크 입니다. js인 만큼 사용자 인터페이스 구축을 위한 JavaScript 라이브러리라고 정의가 되어있습니다. React 특징 1. 데이터 흐름 React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다. Augular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록(대규모 애플리케이션의 경우) 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있어, 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다고 합니다. 2. Component 기반 구조 Component는 독립적인 단위의 소프트웨어 모듈을 말합니다. 즉, 소..