간단한 서브 프로젝트를 진행하면서 웹은 리액트로, 앱은 플러터로 제작해보기로 하였다.
둘 다 처음이라 유튜브 튜토리얼을 따라해보면서 과정을 기록한다.
지금까지 웹 서비스를 만들때 장고나 스프링부트 백엔드를 사용하였지만 프론트엔드는 HTML, CSS, Javascript 세가지로 구현해왔다. (코딩 1년차..) 이 세가지로 서비스를 구현하는 것에 익숙해진 나머지 React, Vue.js 등의 프레임워크?는 왜 사용하는지 의문이 있었는데 튜토리얼 강사분이 강좌를 시작하며 그 이유를 언급해주셨다.
https://www.youtube.com/watch?v=aYwSrzeyUOk&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn
리액트는 Single-Page Application을 만드는 기술
각각의 페이지가 나뉘어져있는 웹페이지랑은 다르다
아직 리액트 작업을 시작하지 않았지만, 이 문장을 듣고 잡히는 부분이 있었다.
이전에 웹앱 서비스를 제작하는 프로젝트를 한 적이 있었는데 HTML, CSS, Javascript, JQuery로만 만들다보니 페이지 하나하나를 이동할 때마다 페이지 자체가 새로고침되는 단점이 있었다.
이는 UX 측면에서 굉장한 손해일 것이므로 페이지 하나하나를 새로고침 없이 이동할 수 있도록 해야만 했는데, 당시에는 장고 프레임워크의 기능을 이용하여 특정 페이지들을 구축한 다음에 특정 버튼을 누를 때마다 필요한 페이지만 보이게 하고 그렇지 않은 페이지는 안보이도록 대처하였다.
하지만 최종적으로 베타 서비스를 만들었을 때 뒤로가기가 부자연스럽거나 한 페이지에 많은 코드들이 몰리다보니 딜레이가 생기는 등 한계점이 명확하게 존재한다는 것을 느꼈었다. 리액트가 이러한 부분들을 해결하기 위해 탄생한건가..?싶은 생각이 들었다.
웹앱을 만드는데 최적화 되어있는 리액트, 약간의 기대를 품고 강의를 마저 수강하며 맥에서 리액트 세팅하는 과정을 간단하게 정리한다.
리액트 기억하면 좋은 기초 개념들
- 초기에는 react js 방식 => createElement 방식으로 웹페이지 만듬
- 좀 더 편하게 개발하기 위한 JSX 방식 등장. script에서 javascript랑 html 요소 둘이 합쳐짐.
- JSX를 웹 페이지에 렌더링하기 위해서는 Babel 라이브러리를 사용해야함
- 함수형 컴포넌트는 이름의 첫 글자가 항상 대문자이어야 함.
- 컴포넌트 = 어떤 JSX를 반환하는 함수
- state는 데이터를 저장하는 곳 => useState 를 쓰는 이유는 데이터가 변했을 때 자동으로 리렌더링을 해주기 위해서
- Props는 일종의 방식 => 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법
- Props는 컴포넌트 안의 속성? 느낌. 해당하는 컴포넌트의 매개변수 느낌으로 값을 전달해줌.
- 컴포넌트의 속성=Props 과 html요소의 속성=이벤트리스너 구분하기
- Props를 통해서 특정 값을 보낼 때, 타입을 맞추지 않는 실수를 방지하기 위해서 타입스크립트를 사용함.
- 컴포넌트가 맨 처음 렌더링 된 이후에 컴포넌트가 리렌더링될 때, 특정 코드는 다시 렌더링 되지 않도록 하기 위해서는? => useEffect 사용 ex) 컴포넌트가 렌더링될 때 API를 호출하고 이후 컴포넌트가 리렌더링될 때 호출이 중복되는걸 방지 가능
Create React App - 리액트 프로젝트 만드는 과정
1. nodejs 설치
https://nodejs.org/ko
2. npx 로 리액트 프로젝트 시작
npx create-react-app react-tutorial- 뒤에 react-tutorial 부분은 임의의 프로젝트명 입력
- 설치 완료 후 cd react-tutorial로 이동!
- 개발서버 열려면 rpm start 입력하면 됨
- 아래는 리액트 설치시 안내 명령어들
