[React 기초] Term 0. 리액트 기본 용어 및 프로젝트 생성 방법

*리액트(React)란?

: 페이스북에서 개발한 자바스크립트 라이브러리
UI 구축 용도로, 특히 싱글 페이지 애플리케이션과 모바일 애플리케이션 개발에 많이 사용된다.
복잡한 UI를 보다 쉽게 만들 수 있고, 관리가 용이하기 때문에 널리 사용 중이다.
 

(프론트엔드라면 무!조!건! 할 줄 알아야 한다....😇)

 
 
 
 
 
 
 
리액트를 본격적으로 공부하기 전, 학습량이 생각보다 방대함을 알아야 한다.
그치만 지레 겁먹을 필요는 없다. 기존과 다른 방식의 라이브러리이기 때문에 새로운 개념이 많을 뿐이다.
그러니 기초부터 차근차근 꼼꼼히 공부하면 좋을 것 같다!
(또, 모든 프로그래밍이 그렇듯 리액트도 계속해서 버전 업데이트가 이루어지니 꾸준히 공부해야 한다.)
 
 
 
 
 
 
 
먼저 리액트가 여타 라이브러리와 구별되는 큰 특징이 있는데
바로 state(컴포넌트의 상태)라는 개념이 존재한다. 
 
 
 
 
*컴포넌트(Component)란?
리액트 내 UI 구축에 사용되는 독립적이며 재사용 가능한 코드 블록
대표적으로 함수형과 클래스형이 있다.
쉽게 '코드의 한 문단' 정도라고 생각하면 좋을 것 같다.
 
 
 
 
 
 
 
 
리액트에는 이 컴포넌트의 상태를 나타내는 개념이 있다.
글자 그대로 이해하면 되는데, 리액트는 바로 이 상태 변화에 따라 업데이트를 진행한다.
 
 
무슨 말이냐하면, 리액트의 DOM 내에서 현재 상태(state)를 이전 상태(state)와 비교하여 변화가 있는 컴포넌트만을 찾아서 업데이트 한다는 것이다.
 
 
 
 
예컨대, '좋아요'컴포넌트와 '구독자'컴포넌트가 있다.
둘 다 초기값은 100.
이후에 '좋아요'컴포넌트는 200으로 증가했고, '구독자'컴포넌트는 그대로 100이라면
'좋아요'컴포넌트만 업데이트! 시킨다는 것이다. '구독자수'컴포넌트는 업데이트 시키지 않는다.
 
 
 
 
 
 
이는 성능 최적화를 위한 중요한 개념이고, 리액트의 유지 보수가 용이한 이유이기도 하다.
(지금은 생소해도 앞으로 useState등을 배우다보면 익숙해진다)
 
 
 
 
 
 
 
 
 
 
 
 

*리액트 프로젝트 생성하는 법

※ 이 글은 prettier, Node.js, yarn이 설치되어 있다는 가정하에 VScode 및 Git Bash 터미널을 기준으로 설명합니다.

 
 
 
 
 
1. VS code를 실행하고, 상단 메뉴에서 Terminal -> New Terminal을 눌러 터미널을 열어줍니다.
(단축키 Ctrl + Shift + `)

 
 
 
 
사진과 같이 터미널창이 떴다면,
2. 터미널창 우측 상단의 + 옆 화살표를 눌러 'Git Bash' 터미널을 켜줍니다.

그러면 이렇게 Git Bash 터미널이 열립니다

 
 

 
 
 
맨위에 초록/보라/노랑으로 써있는 저 알록달록한 코드는 현재 터미널의 위치를 의미합니다.
만약 원하는 위치가 현재와 다르다면,

cd 폴더명

 
위 명령어를 통해 터미널 폴더 이동이 가능합니다.
 
 
 
 
 
저는 migyul 폴더에 리액트 프로젝트를 생성해보겠습니다!
 
 
 
 
 
 
3. Git Bash 터미널에 아래 명령어를 입력합니다.

npx create-react-app 파일명

파일명은 자유롭게

 
 
 
 
 
저는 아래 사진과 같이 'hello.react'이라는 이름의 프로젝트 생성해보았습니다.

그러면 이렇게 로딩이 되며 프로젝트가 생성됩니다. 시간이 꽤 걸려요.

Happy hacking! 문장이 뜨면 완료된 것

 
 
 
 
 
 
 
 
 
 
4. cd 명령어를 이용하여 방금 생성한 프로젝트로 위치를 이동해줍니다.

이렇게 경로가 지정한 파일로 잘 바뀌었다면 성공

 
 
 
 
 
 
 
 
 
5. 아래 명령어를 입력하여 프로젝트를 실행시킵니다.

npm start

 
 

그러면 이렇게 짠!
실행 링크가 열립니다.
이제 여러분이 코드를 작성하시면 이 페이지에 렌더링되어 나타납니다 :)

 
 
 
 
 
 
 
 

이렇게만 하면, 나만의 리액트 프로젝트 생성이 완료되었습니다!

이제 src 폴더 내에 App.js와 jsx 컴포넌트 파일 등을 생성하여 자유롭게 작업하시면 됩니다.
 
 
 
 
 
 
 

+) 추가 : 더 편리한 리액트 프로젝트 생성하기

위처럼 정직하게 리액트 프로젝트를 생성하시면, 우리가 사용할 소스 파일 이외의 리액트 구성 파일들이 아래처럼 전~부 나타나게 됩니다. 그래서 처음 리액트를 배우시는 분들은 다소 복잡하게 느껴질 수 있습니다.

 
 
 
 
 
 
 
그래서 좀 더 간결하게 리액트 프로젝트를 생성해주는 '템플릿'이 존재하는데요.
제가 들은 테킷(TECH!T)의 프론트엔드 스쿨에서는 basic-react라는 템플릿을 알려주셨습니다.
 
 
 
 
 
 
*basic-react 템플릿 사용법

npx create-react-app 파일명 --template basic-react

원래의 프로젝트 생성 코드 뒤에 --template basic-react만 붙여주시면 됩니다

 
 
 
 
이 템플릿을 사용하여 프로젝트를 생성하면,
우리가 사용할 App.js, index.js 등의 파일들만 보이게 됩니다.
아주 간결해서 보기 좋죠?

굳이 템플릿을 사용할 필요는 없지만, 굉장히 편리해서 저는 애용중입니다 (●'◡'●)

 
 
 
 
 
 
 
 

 

 

 리액트 프로젝트 만들기 진짜 끝!♡

날이 갑자기 더워지고 있습니다. 다들 더위 조심하세요☀️