리액트 앱 설치 방법 요즘에는 npx create-react-app 이라는 명령어로 간단하게 설치할 수 있다. 우선 예전에는 어떻게 설치했는지 보고 가자 원래 리액트 앱 설치하는 방법 Webpack 이나 Bable 같은 모듈을 설치하고 설정해야 리액트 앱을 시작할 수 있었다. 웹팩이란 무엇인가? 웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리 이다. 웹팩 장점은 무엇인가? 1. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다. 2. 모듈 단위로 개발이 가능하여 가독성과 유지보수가 쉽다. 바벨이란 무엇인가? 최신 자바스크립트 문법을 지원하지 않는 브라우저들을..

리액트의 주요 특징 중 하나는 가상( Virtual ) 돔을 사용하다는 것이다. 그럼 가상돔에 대해서 알아봐야하는데 우선 가상돔을 왜 사용하는지 알기 위해서 먼저 실제 ( Real ) 돔( DOM ) 에 대해서 알아보고 브라우저가 렌더링하는 과정에 대해서도 알아보자 HTML을 이용한 화면에 UI 표현하기 브라우저에서 UI를 볼 수 있는 것은 이 HTML 을 분석해서 보여줄 수 있기 때문이다. 이 HTML은 요소 ( Element ) 들로 구성되어 있다. 돔 이란? ( Document Object model ) 위에서 보는 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리 구조로 만든 객체 모델을 의미한다. 돔 조작 위에 보이는 DOM 트리를 DOM 에서 제공해주는 API를 이용..

리액트는 여러 컴포넌트를 이용해서 웹 앱을 개발하게 된다. 그러면 컴포넌트는 무엇일까? 리액트로 만들어진 앱을 이루는 최소한의 단위 리액트는 여러 컴포넌트 조각으로 되어있다. 만약 하나의 페이지를 리액트로 만든다고 보면 아래 그림처럼 여러개의 컴포넌트가 모여서 하나의 페이지를 이루게 된다. 이 인스타그램 페이지를 보면 여러 개의 컴포넌트로 이루어져 있다. 검색,프로필,스토리,포스트 컴포넌트 등으로 구성되어 있는데 이렇게 컴포넌트가 여러 개로 나누어져 있기 때문에 하나의 컴포넌트를 여러 곳에서 사용할 수 있다. 또한 여러 명이 각자 맡은 컴포넌트를 동시에 수정할 수도 있다. 리액트 컴포넌트는 두가지가 있다. 원래 리액트로 개발할 때는 클래스 컴포넌트를 이용해서 많이 개발을 했지만 리액트에서 리액트 Hook..

현재 리액트를 사용하는 기업은 아래 사진에서와 같이 굉장히 많다. 해외 기업뿐만 아니라 채용공고를 통해서 보면 국내 주요 기업들도 프런트엔드를 위해서 리액트를 사용하고 있다는 것을 알 수 있다. 왜 이렇게 많은 곳에서 리액트를 사용할까? 1. 상대적으로 배우기 쉬운 라이브러리 2. 여러 기능들을 위해 이미 만들어져 있는 라이브러리 환경 3. 많은 기업들의 사용으로 검증이 된 라이브러리(대표적으로 페이스북)