1. React 시작하기(yarn 설치 및 실행)

안녕하세요! delay100입니다.

오늘부터 React를 공부하려고 해요! 공부한 것들 중에 중요한 것들은 기록해보겠습니다.

책 리액트를 다루는 기술, 개정판의 1장 내용을 다루고 있습니다.

이번 포스팅의 Github 링크

https://github.com/delay-100/study-react/tree/main/ch1/hello-react

GitHub - delay-100/study-react

 

---

내 PC에 이미 있는 개발환경 - React 공부 시 계속 사용합니다.

• VS Code(비주얼 스튜디오 코드)
• git bash
• Node.js - 설치방법

0 - Windows에서 Node.js 개발환경 설정하기(with. git bash)

 

---

1. React?

 

React?

- 오직 V(View)만 신경 쓰는 라이브러리
- Virtual DOM 사용(DOM: Document Ojbect Model): 객체로 문서 구조를 표현하는 방법
** Virtual DOM 동작 원리 이해하기

 

- React 용어

render 함수

- 컴포넌트가 어떻게 생겼는지 정의
- html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 작동하는지에 대한 정보를 지닌 객체를 반환함

렌더링: 사용자 화면에 뷰를 보여주는 것
조화 과정(reconciliation): 컴포넌트에서 데이터에 변화가 있을 때 새로운 요소로 갈아 끼는 것

 

---

2. yarn?

 

yarn?

npm을 대체할 수 있는 패키지 관리자 도구
npm 보다 더 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공함

 

- yarn 설치

npm install --global yarn

 

- yarn 버전 확인

yarn --version

 

 

---

3. React 프로젝트 생성하기

 

3-1. 프로젝트 생성 및 실행

 

CRA(create-react-app)

- 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고, 바로 간편하게 프로젝트 작업 환경을 구축해주는 도구
- 설정을 커스터마이징 해야하면 자유롭게 설정 변경 가능

 

- React 프로젝트 생성(yarn 이용)

yarn create react-app <프로젝트 이름>

실행결과 (하단의 일부 中)

- React 프로젝트 생성(npm 이용)

npm init react-app <프로젝트 이름>

 

- React 프로젝트 실행

# yarn 이용
yarn start
# npm 이용
npm start

 

3-2. 생성 결과 확인

 

아래의 주소로 접속하면 리액트가 시작된 것을 확인할 수 있습니다.

http://localhost:3000

 

---

이번 포스팅에서는 리액트에 접근하는 방법에 대해 다뤄보았습니다.

다음부터는 리액트를 직접 다뤄보는 포스팅을 올려보겠습니다. 

 

읽어주셔서 감사합니다. 잘못된 정보는 댓글로 알려주세요!