리액트란?
사용자 인터페이스(UI)를 구축하기 위한 효율적이며 유연한 javascript 라이브러리이다. Component 라고 불리는 코드 파일을 이용하여 UI를 구성하도록 돕는다.
그럼 왜 리액트를 사용할까?
순수 자바스크립트를 사용해 보면 알겠지만 다루는 요소가 많을수록 정해야하는 규칙들이 많아지게 된다.
각 요소마다 DOM을 지정해 관리하다 보면 나중에는 어떤걸 만져야할지 감이 안온다.
그래서 자바스크립트의 경우 속성이 바뀔 때 선택한 DOM의 속성을 업데이트 하는 방식으로 동적으로 바뀌는 경우 코드가 복잡해지고 관리하기가 힘들어진다.
하지만 리액트의 경우 속성이 바뀔때 규칙을 업데이트 하는 방식이 아니라 새로 만들어서 보여주는 방식이다.
리액트의 장단점을 간단하게 나열해 보겠다.
- 장점
- 프로그램 설계를 깔끔하고 일관성있게 정리할 수 있는 조직성이 강함
- 코드를 재사용할 수 있어 코드 재사용성이 높음
- 다른 프레임워크에 비해 사용자가 많아 정보가 많음
- 단점
- 입문자에겐 어려울수 있음, 사전 지식 요구
- UI렌더링에 초점되어 있기 때문에 상태 관리, 라우팅 등의 라이브러리 및 프레임워크 동시 사용 필수
- 로딩 시간이 김, SPA(single page application)구조로 페이지의 크기가 커질수록 로딩시간이 길어짐
리액트 시작하기
리액트는 사전에 개발환경을 구성해 주어야한다.
1. Node.js 설치
리액트는 라이브러리의 종류이기 때문에 패키지 매니저 도구인 npm을 통해 설치해야 한다. Node.js를 설치하면 npm이 자동으로 설치되기 때문에 사전에 다운로드한다.
또한 bable을 추가적으로 다운받는다. 리액트 작성시 JSX를 사용해 코드를 작성하는데 자바스크립트 대신 사용할 수있다.
자바스크립트를 사용해도 똑같은 결과가 나오지만 JSX를 사용하면 HTML코드를 사용하여 코드를 짤수있다. 가독성이 더 좋음.
2. Create-react-app
리액트 설치가 끝나면 터미널에
$ npx create-react-app 파일명을 입력해 리액트 파일을 설치해 준다.
설치하면 사진과 같은 파일이 생성된다. 이 파일에 compoment나 페이지를 만들어 하나의 웹을 구성하는 것이다.
파일 구성을 보면 javascript와 css파일로 구성되어 있다. 리액트는 다른 언어가 아니라 자바스크립트 라이브러리인 것을 알 수가 있다.
3. 리액트 페이지 실행
리액트 파일을 생성했다면 페이지를 실행할수 있다. 해당 리액트 파일 터미널에
$ npm start입력하면 localhost:3000으로 페이지가 실행된다.
이제 기본적인 세팅은 끝이 났다. 이제 하나씩 컴포넌트와 라우터를 사용해 살을 붙여나가는 험난한 과정만 남아있다.
다음 포스트
처음 리액트를 시작할때는 왜 하는지도 모르고 그냥 설치하고 시작했는데 나름 조금 알아서 그런지 왜 쓰는지 이해가 된달까. 하지만 아직 멀었다. 다른분들의 포스팅을 보고나면 나는 그냥 말도 못하는 감자다. 이제 처음이니깐 조금씩 전문성을 입혀보도록 하자.
다음 포스트는 리액트에서 가장 중요한 props와 state를 다뤄보겠다. 처음 이 개념을 접했을때는 무슨 말인지 도저히 감이 안잡혔는데 지금은 얼래벌래 사용하고 있다. 하나씩 천천히 되집어보면서 다시 익히는 시간을 만들자.
