도대체 react가 뭐길래?
리액트 관련 포스팅 시리즈를 보고 따라 적어보며 학습하고자 글을 남겨본다.
원래 적으면서 공부하는 편..ㅎ
(그대로 따라 작성함 주의!)
React는 많이 사용되고있는 라이브러리 중 하나다.
경쟁중인 라이브러리/프레임워크 로 많이 들어봤던 것들로 Angular, Vue 가 있다.
리액트는 페이스북이 만든 UI구축을위한 라이브러리다.
가장큰 세가지특징은 아래 세가지라 할 수 있다.
-JSX문법사용
-Component 기반(여러 부분을 분할해서 코드의 재사용성과 유지보수성을 증가시킴)
-Virtual DOM
리액트를 사용할때는 여러가지 라이브러리를 동시에 사용하기때문에, 이를 하나로
합치기위해 webpack이나 parcel같은 번들러를 이용해서 작업한다.
또한 JSX문법으로 작성되거나 최신 JS문법으로 작성되기때문에 babel을 사용해서
브라우저 호환성을 생각해야한다.
위와같은 설정파일을 세팅하는게 어려운 초보자에게 유용한 도구가 있다.
Create-react-app을 사용해보자.(CRA)
실습을 위해 준비물을 확인해주세용
-Node.js 설치
-terminal
-코드에디터
터미널에서 npx create-react-app hello 를 입력합니다.
hello는 폴더명으로 원하는 이름으로 작성해도됨!
설치를 하고나면 여러 명령어를 확인할 수 있습니다.
-yarn start(npm start)
-yarn build(npm run build)
-yarn test(npm run test)
-yarn eject (npm run eject)
위 명령어들로 리액트 앱을 개발모드에서 개발하고, 리액트를 최종 배포 버전으로 배포하고, 테스트하고, 설정을 추가하는 등의 명령을 할 수 있다.
리액트앱이 완성된 폴더로 터미널을 이동시키고 yarn start를 입력해주세요.
그렇게되면 약간의 로딩 후 리액트 앱이 나타날 것입니다.
크롬 브라우저에서는 리액트 개발을 쉽게 하기 위한 개발자 도구가 있습니다.
이 링크를 클릭해 확장 프로그램을 확인하고 설치해주세요.
위 과정들이 완료됐다면
CRA폴더를 살펴봅시다.
Public
가상DOM을 사용하는 리액트는 실제 DOM이 필요하다.
즉, 가상 DOM이 들어갈 빈 껍데기 html이 필요하다는 것인데, 바로 그 빈 껍데기가 존재하는 폴더다.
-index.html: 가상 DOM이 들어가기 위한 빈 껍데기 html파일.
-manifest.json: 웹 앱 매니페스트는 사용자가 앱을 볼 것으로 예상되는 영역에
웹 앱이나 사이트를 나타내는 방식을 개발자가 제어하고, 사용자가 시작할 수 있는 항목을 지시하고, 시작 시의 모습을 정의할 수 있는
Src
리액트 개발이 이루어지는 메인 폴더.
-index.js: App.js에서 생성된 리액트 코드를 index.js에서 불러온 후,
public에 있는 index.html의 id가 root인 곳에다가 넣는 코드
-App.js: 리액트 코드를 생성하는 부분.
class App extends Component{ ~...}먼저 App이라는 클래스를 생성한 후, 리액트 컴포넌트를 상속받는다.
그렇게 되면 리액트 컴포넌트 메소드를 사용할 수 있게 된다.
render() 메소드는 리액트 컴포넌트인데, 화면에 html 뷰를 생성해주는 역할을 한다. return으로 받는 값들은 나중에 html코드로 바뀌게 된다.
그렇게 생선된 App클래스를 export문법을 이용해 내보낸다.
모든 리액트 파일들은 전부 html코드 처럼 사용할 수 있다.
이를 통해 알 수 있는것은 html코드를 여러개의 리액트 파일로 분할해서 작업할 수 있다는 것. 그렇게 되면 여러 사람이 협업을 하는 것도 쉬워지고
코드의 수정도 특정 부분만 하면 되기 때문에 이점이 많아진다!
