React.js 기초(1) (개념, 특징)
내가 react를 공부하게 된 이유는 웹 개발을 공부를 시작하면서 HTML,CSS,JavaScript와 같은 기초 웹 기반 지식들을 익혔는데 여러가지 불편한 요소들을 경험하게 되었다. 그리고 Spring을 공부하게 되면서는 프레임워크가 형성된 상태에서 개발하는 것이 얼마나 효율적인지를 경험하게 되었고 따라서 View를 개발하거나 CSS를 개발할 때도 이러한 프레임워크 기반으로 개발을 수행할 수 없을까 생각되다가 React에 대해서 알게 되었다.
최근 현업에서는 Vue.js가 더 많이 사용된다고 하지만 Vue.js 또한 React.js에서 조금 더 변형된 형태이기 때문에 먼저 React부터 배워보는 것이 좋다고 생각되어 React를 공부하게 되었다. 일단 기초부터 시작하는 만큼 유튜브에 있는 "생활코딩"의 수업을 바탕으로 배워보았다.
생활코딩 수업은 React에 대한 deep한 지식을 먼저 다루기보다는 기초부터 구현을 진행하면서 그때그때 필요한 지식들을 채워주는 식으로 강의가 진행된다고 생각되며 블로그에 남기는 내용도 react의 전 범위를 아울러서 축약된 버전으로 글을 쓰기보다는 기초부터 시작하여 차근차근 그 개념들을 짚고 넘어가는 형태로 작성할 예정이다.
React란?
웹/앱의 view를 개발할 수 있도록 하는 라이브러리
Spring을 경험해본 나로서는 MVC패턴에서 V에 해당되는 View의 개념으로 인식된다. 이를 효율적으로 개발할 수 있게 해주는 라이브러리이자 프론트엔드의 프레임워크의 일종이라고 생각된다
React의 특징
- Component라는 것을 통해 가독성을 획기적으로 높일 수 있다. (태그명만으로 복잡한 코드를 표현할 수 있다.)
- 재사용성이 높아진다는 중요한 효과도 있다
- 유지보수가 폭발적으로 좋아진다.(실제 내용을 바꾸면 top.html을 사용하는 모든 태그에서 동시다발적으로
변경된 내용이 업데이트된다.)
React 시작하기
이는 react-app이라는 디렉토리를 만들고 create-react-app을 react 개발 환경으로 만들어달라고 하는 것이다
이 떄 공식문서를 보게 되면 npm, npx가 있는 것을 알 수 있는데
npm: 프로그램을 설치하는 것
npx; 한 번만 사용하는 것, 최신 상태가 되는 것 그러나 계속 설치해야 한다
의 차이가 있다. npm은 용량이 무거운 반면 npx는 가벼운 용량이나 일회성이기 때문에 계속해서 설치해주어야 하는 단점이 있다. 따라서 웬만큼 react를 통해 개발을 진행할 거라면 npm을 install해주는 것이 좋다
react-app이라는 디렉토리를 만들고 create-react-app 통해 react 개발 환경으로 만들어달라고 하는 것이다
이는 "생활코딩" 강좌에서 자세히 다루며 중요한 내용이 아니기 떄문에 생략한다
- npm run start (vs code 터미널에서 명령어 입력)
이러한 명령어를 입력하면 자동으로 서버가 동작하여 react를 통해 작성한 코드들이 웹 화면상으로 나오게 된다. 기존의 react와 같은 프레임워크를 사용하지 않으면 web을 새로고침하여 업데이트하며 코드가 제대로 설계된 것이 맞는지 확인하는 작업이 필요했지만
react는 실시간으로 바로 화면 상에 나타난다.
이것이 개발 효율에 있어 상당한 메리트를 느끼게 해준다.
react 앱이 동작하는 것을 알 수 있다.
(localhost:3000이라는 주소로 동작하는데 위 주소는 사용자 설정을 통해 변경이 가능하다
또한 위 이미지는 초기 화면은 아니며 초기 화면은 react 개발사에서 채택한 이미지가 나오게 된다)