React 기초 정리 - 1장 (React란, 개발 환경 설정, 폴더 구조)

웹 개발을 본격적으로 해야겠다고 생각한 후, 종강하면 꼭 요즘 프론트엔드 세계에서 기본이라는 React를 마스터.. 까지는 아니더라도 손에 익혀야겠다고 생각했다.
매일 React를 공부하려고 다짐해도 육각별만 띄우다 끝나던 나날들.. 이제는 청산하기로 마음을 먹고, 개인적으로 가장 강의 스타일이 담백 & 깔끔하고 무엇보다 가격이 무료인 생활코딩의 egoing님 강의로 리액트를 배워보았다. 아래는 강의를 모두 듣고 그 내용을 정리한 것이다. egoing 만세 생활코딩 만세

생활코딩에서 볼 수 있는 강의는 위와 같이 10개의 동영상으로 준비되어 있었으나, 아래의 Index 제목들은 편의에 의해 필자가 새로 작성했다.
(생활코딩 React 강의 주소: https://opentutorials.org/course/4900)

또, 코드 예제들 역시 특별한 언급 없이 필자 나름대로 수정한 경우들이 있다. 이 점을 참고하여 글을 읽기 바란다.
이제, 본론으로 넘어가 보자.

React란?

React는 자바스크립트 라이브러리의 하나로, 사용자 인터페이스(프론트엔드 기준)를 만들기 위해 사용된다. 메타와 개별 개발자 및 기업들 공동체에 의해 유지 및 보수가 이루어지고 있다. 2013년에 발표되었다.

리액트는 싱글 페이지 애플리케이션(Single Page Application, SPA라고 한다.)이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.

Dirty checking과 Virtual DOM을 활용하여 업데이트 해야하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는게 가능하다. 기본적으로 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리인지라 순식간에 대세로 떠올랐다. 거기에 기본적으로 프레임워크가 아니라 라이브러리인지라 다른 프레임워크에 간편하게 붙여서 사용하는 것도 가능하며, React Hooks라는 강력한 메소드들을 지원하면서 사실상 웹 프론트엔드 개발의 표준으로 자리잡았다. 이와 더불어 타입스크립트나 Sass 같은 언어도 지원한다. 또한 Next.js 등의 등장으로 인해 SSG, SSR등을 할 수 있게 되면서 사용 범위 또한 기하급수적으로 늘어났다.

개발 환경 설정

React는 자바스크립트 라이브러리 중 하나이므로, 자바스크립트 런타임 환경인 Node.js를 이용해 개발 환경을 설정할 수 있다.
(Node.js는 이미 설치되어 있다고 가정한다.)

1. 기본 프로젝트 폴더를 하나 만든다.
2. (1)의 폴더 내에서 터미널 창에 npx create-react-app 디렉토리명을 입력한다. (디렉토리명은 보통 React 프로젝트로 새로 생성할 폴더명으로 한다.)
3. 끝이다. npm start를 터미널에 입력해 LocalHost상의 미리보기가 잘 실행되는지 확인해 준다.

폴더 구조 살펴보기

개발 환경 설정 후 생성된 폴더 구조다.
(혼동금지!! 사진 최상단의 'build' 폴더는 하단에 설명할 배포를 하지 않았다면 없는 게 정상이다. README.md와 .gitignore 역시 필자가 추후 생성한 것이므로 없어도 된다.)

node_modules와 package-lock.json, package.json은 Node.js를 이용한 개발을 해 봤다면 알겠지만 node에서 개발에 필요한 패키지를 알아서 관리해 주는 것이다. 그러니 넘어가도록 하자.

public 폴더는 index.html과 같은 정적 파일이 포함되는 곳으로, 컴파일이 필요 없는 파일들이 위치하는 폴더이다.

public 폴더 내에 위치한 index.html 파일의 모습이다. 코드 31번 줄에서 볼 수 있는 <div id="root"></div>에 우리가 만드는 React 앱이 들어가 화면 상으로 표시된다.

src 폴더는 source라는 의미로, 우리가 작성하는 js 파일이 저장되어 있는 디렉토리이다.

src 내의 index.js이다.

1번 줄은 React 라이브러리를 불러온다. React가 우리가 작성한 JSX를 React.createElement()로 변환하기 때문에, 모든 React 컴포넌트들은 반드시 React 모듈을 불러와야 한다.

React 모듈을 불러올 때는 경로나 익스텐션을 쓰지 않는다. 이들은 로컬 파일이 아닌 package.json의 의존성 목록에 포함되어 있다.

8~12번 줄을 보면, 위에서 확인한 'root'에 괄호 안의 내용을 렌더링 해 준다는 것을 확인할 수 있다.
여기서 4번 줄과 10번 줄을 보면, 공통적으로 'App'이라는 단어가 들어가 있음을 확인할 수 있다. 이는 React에서 우리가 작성하는 코드들이, 현재 디렉토리의 App이라는 파일명으로 저장되어 있음을 이야기한다.
그렇다면, 우리는 App이라는 파일에서 React의 뷰를 편집해야 할 것이다.

이 파일이 바로 본 앱의 화면을 구성할 APP.js이다. 1번 줄에서 같은 폴더 내의 APP.css를 불러와 StyleSheet을 사용하고, function APP()에서 return하는 JSX 문법의 html 파일을 index.js에 표시, index.html은 그를 받아 화면에 최종적으로 렌더한다. (24번 줄의 'App'을 export하는 구문이 그를 알려 준다.)

이제 폴더 구조를 모두 확인했으니, 리액트 기초 정리 2장에서 문서를 실제로 편집해 보자.

추가: 읽을거리) MDN Web Docs - React 시작하기https://developer.mozilla.org/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started