자라는 것을 잘하는 개발자 자라는 것을 잘하는 개발자

Study/React

• React 문법 : JSX (JavaScript XML)

  Study/React 2020. 1. 2. 10:04

  import React from 'react'; function Hello() { return 안녕하세요 } export default Hello; return 뒤에 작성된 부분이 마치 HTML 처럼 생겼지만 이는 JSX 문법이라고 할 수 있다. JSX란? 자바스크립트 문법을 확장하여 UI가 어떻게 보일지 정의하는 문법이다. 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면, Babel이 JSX 문법을 JavaScript로 변환해준다. 하지만, JSX가 제대로 자바스크립트로 변환이 되려면 지켜야하는 규칙들이 있다. JSX 규칙 1. 태그는 닫혀있어야 한다. import React from 'react'; import Hello from './Hello'; function App() { return ..

  Read More

• 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..

  Read More

• 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를 설치하면 딸려오는 패키지 매니저 도구이고, 프로젝트에서 사용되는 라이브러리를 설치하고 라이브러리 버..

  Read More

• 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 관리 및 상태값 업데이트 관리 등의 작업을 최소화하고, 기능 개발, ..

  Read More