리액트란?
- FE 개발을 위한 JS 오픈소스 라이브러리이다.
→ 오픈소스 : 누구나 자유롭게 사용, 복제, 배포, 수정이 가능한 소프트웨어 - 리액트는 3가지 특징을 가지는데, 각각
선언형 프로그래밍,컴포넌트 기반,높은 범용성을 가지는 것이다. - 리액트는
HTML, CSS, JS를 전부 사용하는 것이 아니라,CSS, JSX를 사용한다.
→JSX는 HTML과 JS를 결합한 문법이다.
선언형 프로그래밍
JSX를 이용하면 기능들을 컴포넌트 단위로 만들고, 컴포넌트의 이름을 본문에 선언하여 사용한다.- 그러면 작성된 코드를 위에서 다시 읽어보고 파악하지 않아도, 선언된 컴포넌트의 이름으로 기능과, 본문의 구조를 파악할 수 있다는 장점이 있다.
- 이와 반대되는 개념으로는 명령형 프로그래밍이라는 것이 있으며, 여기 해당되는 예시로
HTML문서가 있다.
→ 그냥 봐서는 어떤 기능을 하는지는 모름
컴포넌트 기반
컴포넌트란?
- 하나의 기능을 구현하기 위한 코드의 묶음
- 컴포넌트를 이용하면 마크업과 기능을 함께 담아 불러올 수 있다. (JSX)
- 각각 독립적인 기능을 가지며, UI의 한 부분을 담당하는 요소이며, 이를 조합하여 사이트를 만들어낸다.
- 컴포넌트 기반의 장점
- 문서에 포함된 다른 코드들에 대한 의존성이 없어 독립적이므로, 안정적이다.
→ 서로 영향을 주지 않는다. - 기능을 구현하는 데에 집중 할 수 있다.
- 만들어진 기능을 다시 활용하기 용이하다.
- 오류가 생기는 경우 컴포넌트 별로 테스트하기 용이하다.(유닛테스트)
- 오류를 발견하는 경우 해당 컴포넌트만 고치면 되므로, 유지보수가 쉽다.
- 문서에 포함된 다른 코드들에 대한 의존성이 없어 독립적이므로, 안정적이다.
→ 대부분이 컴포넌트의 독립성에 대한 장점.
범용성
- 어떤 프로젝트가 어떤 프레임워크로 개발된 경우 해당 프레임워크에 종속된다.
→ 다른 프레임워크로 갈아타기가 쉽지 않다. - 하지만 리액트는 JS 라이브러리이기 때문에 기존 프로젝트를 갈아엎지 않고도 일부 수정함으로써 적용시킬 수 있다.
- 예를 들어 어떤 프로젝트에서 리액트 내부에 있는 기능을 사용하고 싶다면 리액트를 불러와서 일부의 기능만 사용 할 수도 있다.
create-react-app(CLA)
- 리액트를 활용한
SPA(Single Page Application)를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인
→ 일종의 라이브러리 보따리 - 리액트로 앱을 만들기 위해서는 세팅들이 필요한데,
create-react-app을 이용하여 필요한 패키지등의 세팅을 한번에 끝낼 수 있다.
사용하기
- 터미널을 이용하여 원하는 디렉토리로 이동 후 아래의 명령어를 사용한다.
npx create-react-app 프로젝트 이름→ 여기서 npx 는 npm 의 기능 중 하나이며 간단하게, 전역환경이 아니라 프로젝트마다 일회성으로 패키지들을 설치하는 것이라고 이해하면 될까 싶다.
- 이렇게 설치된 모듈들은
node-modules폴더에 저장된다.
내부 파일 살펴보기
- public / index.html
- 내부에
<div class="root">가 존재한다. - 페이지의 이름을 설정하거나, 필요한 폰트나 라이브러리를 추가하여 불러 올 수도 있다.
- 내부에
- src / index.js
- 리액트로 작성된 내용을 어디에 렌더링 할 지 작성되어 있다.
ReactDOM.render(<App />,document.getElementById('root'));
//리액트의 App 컴포넌트를 HTML파일의 root 아이디를 가진 요소의 위치에 넣는다.+
- 정말 간단하게만 생각해보려면, 구조와 기능을 동시에 작성할 수 있는 문법인 JSX를 사용하여 만든 컴포넌트들을 본문(App)에 선언하여 앱을 만드는 라이브러리라고 생각해 볼 수 있다.
만약 사이트의 구조를 변경해야 한다면?
- 만약 리액트를 사용하지 않고 사이트의 구조를 바꾸고 싶다면, 구조를 바꾸고, CSS를 수정하고, 변경된 DOM을 찾아 다시 해당 로직을 수정하는 과정을 거친다.
- 하지만 리액트의 컴포넌트를 활용하면, 컴포넌트들이 각각의 기능을 독립적으로 가지고 있으므로, 위치만 수정해주면 된다
