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

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

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

React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 이다. 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용된다. 그러기에 이러한 웹 앱을 만드는 다른 Tool인 Vue나 Angualar 와 많이 비교를 하게 된다. 처음 볼 수 있는 가장 큰 차이점은 프레임워크와 라이브러리의 차이이다. Angular와 Vue 는 프레임워크이며 리액트는 라이브러리이다. 프레임워크와 라이브러리 차이점은 무엇일까? 간단하게 보면 프레임 워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것이다. 라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것이다. 이 위에 그림을 보면 프레임 워크는 라이브러리를 포함하고 또한 우리가 작성한 소스 코드를 호출한다. 그리고 소스 코드는 어떠한 기..