react
-
React Component 생성 및 사용Study/React 2020. 1. 1. 10:05
React Component 리액트 컴포넌트는 html 요소들을 반환하는 것이라고 할 수 있다. 컴포넌트는 만들고 싶은 만큼 만들고, 각각 파일로 분리해서 관리한다. 하지만 React application은 한 번에 하나의 컴포넌트만 rendering 할 수 있다. 따라서 모든 것은 App.js에 모두 들어가야하고, 이 application 안에서 많은 컴포넌트를 넣고 import할 수 있다. 그리고 컴포넌트는 일종의 UI 조각이라고 할 수 있다. 따라서 쉽게 재사용이 가능하다. 컴포넌트 여러 곳에서 여러 번 불러와서 사용할 수도 있다는 것이다. React Component 생성 1. src 디렉토리에 Hello.js 파일 추가 2. import & 함수 또는 클래스 형태 & export 코드 작성 He..
-
React 개발 환경 세팅 & React 개발 서버 실행 & Github 연동Study/React 2019. 12. 31. 10:13
React 개발 환경 준비 Node.jsWebpack 과 Babel 같은 도구들이 Node.js 를 기반으로 만들어졌다. 따라서 해당 도구들을 사용하기 위해서 Node.js 를 설치해야한다. Webpack, Babel의 용도? 리액트 프로젝트를 만들면 컴포넌트를 여러가지 파일로 분리해서 저장하고, 이 컴포넌트는 JSX 라는 문법으로 작성하게 된다. 분리된 여러 개의 파일을 한 개로 결합하기 위해서 Webpack 이라는 도구가 필요하고, JSX와 같은 새로운 자바스크립트 문법들을 사용하기 위해 Babel 이라는 도구가 필요하다. YarnYarn 은 조금 개선된 버전의 npm 이다. npm 은 Node.js를 설치하면 딸려오는 패키지 매니저 도구이고, 프로젝트에서 사용되는 라이브러리를 설치하고 라이브러리 버..
-
React를 사용해야하는 이유Study/React 2019. 12. 30. 23:21
React란 무엇인가? A JavaScript library for building user interfaces 최근 웹페이지들은 사용자와의 인터랙션이 많고 UI를 동적으로 표현해야하는 경우가 많다. 이런 상황에서 만약 HTML, CSS, JavaScript 만으로 웹페이지를 구성해야한다면 DOM을 조작하고 업데이트 해야할 때 코드가 굉장히 복잡해질 것이다. 왜냐하면 JavaScript로 DOM을 조작하려면 document.getElementById('blabla') 와 같이 직접 DOM을 선택하고, 다양한 이벤트핸들러를 통해 업데이트 하는 작업을 해야하므로 유지보수 하기가 어려워질 수 있다. 따라서 웹페이지를 개발할 때 필요한 DOM 관리 및 상태값 업데이트 관리 등의 작업을 최소화하고, 기능 개발, ..
-
[생활코딩] JavaScript 모듈 & 라이브러리Study/JavaScript 2019. 12. 6. 17:45
모듈(module) 모듈화(Modularization)란 수 많은 로직을 재사용할 수 있는 단위로 나누어, 별도의 모듈이 라는 형태로 떼어내 다른 프로그램에 부품으로 사용하는 기법이다. 그리고 그 결과물을 모듈이라 한다. 자바스크립트의 경우 긴 코드를 js파일에 따로 저장해서 프로그램 크기를 줄이는 것을 모듈화라고 한다. 예시) 분할된 파일을 불러오기 - 호스트 환경 javascript는 웹브라우저를 위한 언어로 시작했지만(클라이언트), 서버 측에서 실행되는 javascript도 있다(서버사이드 Node.js). 따라서 호스트 환경에 따라 모듈화 하는 방법을 알아야 한다. - 모듈과 라이브러리의 차이 모듈이 프로그램의 작은 부품이라 하면, 라이브러리는 자주 사용되는 부품을 재사용하기 편하게 잘 정리한 코..