[리액트] 리액트 노트
이 글은 리액트 튜토리얼 영상을 공부하면서 남기는 노트입니다. 영상에 있는 내용과 제가 아는 내용을 알아보고 정리하며 글을 쓰고 있습니다. 모든 출처는 아래에 있습니다.
리액트란?
- Open Source JavaScript Library (Framework가 아니라 Library이다!!)
장점
- 오직 UI를 만드는 용도이다보니 가볍다
- 페이스북이 유지 보수를 해준다
- 사용하는 사람도 많다보니 오류나 도움이 필요할 때 구글링하면 바로 나온다
- 인기가 많다
구체적인 장점을 더 알아보자.
Component를 조합하는 방식
리액트는 전체 UI를 컴포넌트들을 조립하는 방식으로 구성한다. 그래서 다른 프로젝트의 컴포넌트를 가져와서 사용하기도 쉽고 재사용하기도 쉽다. (ex) Footer 컴포넌트만 다른 Footer 컴포넌트로 바꾼다.
리액트는 선언형 방식 (알고리즘과 상반된 방식)
리액트는 선언형 패러다임이 적용됐다. 먼저 선언형이 어떤 것인지는 아래의 예를 보고 더 이해를 해보자.
내가 나무를 만들고 싶을 떄
- 선언형 패러다임: 나무를 이렇게 그려줘!라고 한다 (-> React가 알아서 나무를 만들어줌)
- 명령형 패러다임: 나무를 그리는 구체적인 방법을 각각의 단계별로 전부 알려준다 (알고리즘이 이런 방식이다.)
우리가 UI가 어떻게 생겨야 하는지만 알려주면 리액트가 알아서 실제 UI 만들어준다. UI를 만드는 과정이 이렇게 추상화가 되어서 복잡한 UI를 만들 때 우리가 고통받지 않는다.
리액트는 데이터가 변하면 컴포넌트들을 효율적으로 업데이트하고 렌더링 해준다.
가장 무거운 작업인 DOM Update도 리액트에서 효과적으로 처리된다.
다른 애플리케이션에 통합할 수 있다
페이지의 일부분이나 전체 페이지 또는 어플리케이션 전체를 이식하기 쉽다.
모바일 앱도 만들 수 있다
React Native를 사용해서 모바일 앱 개발도 할 수 있다.
단점
- 최신 리액트는 IE8 이하 버전을 지원하지 않는다
새로운 리액트 앱 만들기
리액트를 사용하기 위해서는 원래 여러 가지 빌드 설정을 해줘야 하는데 처음 배우는 입장에서 그런 것들을 하기가 쉽지 않다.
그래서 존재하는 Build 설정 없이 React App을 만들어주는 명령어가 있다. create-react-app이다. 이 명령어를 사용하면 Build 설정 없이 바로 single-page인 React App을 만들 수 있다.
명령어를 사용하는 두가지 방법이다.
1. npx로 명령어 사용하기
npx create-react-app 프로젝트명* 위 명령어가 동작하지 않으면 npm을 업데이트 해주고 다음의 명령어를 치면 해결된다.
npx는 npm package runner이다. 원래는 create-react-app을 깔고나서 create-react-app 명령어를 사용할 수 있지만 npx라는 최신 기능을 사용하면 안깔고도 사용할 수 있다.
2. npm으로 명령어 사용하기
npx말고 내 로컬(PC)에 패키지를 깔고 create-react-app 명령어를 사용해보자.
npm install create-react-app -g↑먼저 패키지를 깔고
create-react-app 프로젝트명↑create-react-app 명령어를 실행하면 된다.
이렇게 하면 패키지를 주기적으로 업데이트를 해줘야 한다는 것을 기억하자.
앱 실행하기
이제 localhost에 실행해보고 결과를 보자.
cd 프로젝트명
npm startlocalhost:3000으로 다음의 페이지가 뜨면 성공이다.
Component
UI의 일부분을 설명하는 역할을 한다. 보통 자바스크립트 파일이다.
Component의 특징
- 컴포넌트는 재사용할 수 있다
- 컴포넌트 안에 컴포넌트를 넣을 수도 있다
Component의 종류
- Stateless Functional Component
- Stateful Class Component
출처
아래의 유튜브 영상을 보면서 공부하면서 남기는 노트입니다.