.png)
본 시리즈는 '생활코딩'님의 react 기초 강좌를 바탕으로 공부를 위해 재창작된 글입니다.
작성자의 수준이 아직 그리 높지 않아 오류가 있을 수 있습니다.
리액트는?
Facebook에서 출시한 컴포넌트 기반 웹 개발 프레임워크이다.
컴포넌트(Component)란?
컴포넌트(Component)는 쉽게 말해 '객체'와 개념이 비슷하다.
웹 화면을 구성하는 요소들을 말하는데, 웹 화면을 디자인하는데 필요한 상단바나 사이드바 같이 여러번 사용해야하며 필요한 구성요소들을 코드로 구현한 것이 컴포넌트이다.
이런 구성요소를 컴포넌트(객체)로 만들어
- 코드 가독성을 높힌다.
- 재사용성을 획득한다.
- 개선을 용이하게한다. (유지보수)
같은 장점들을 가능하게 하는 것이 React! 컴포넌트 기반의 장점이다.
React의 설치 방법 간단하게! (맥 OS기준)
- node.js 를 설치한다.
- npx를 설치한다.
- 리액트 앱 설치를 원하는 디렉토리를 만든다.
- 터미널을 통해 디렉토리에 들어가
sudo npx create-react-app치고Enter키 - 생성된 react앱 터미널 내에서
npm run start치고Enter키
React App의 로컬호스트 웹페이지를 보게 될 것이다! 이러면 설치가 완료 된 것이다!
초기 설치 파일 디렉토리 구조
설치 파일들의 구조와 역할을 통해 React가 어떻게 동작하는지 알아보자.
1. public/index.html
가장 큰 HTML 문서로서 파일 실행(npm run start)에 결과를 보여준다.
앞으로 만들 컴포넌트들을 올려두는 파일이라 생각하면 쉽다. 'body'태그로 감싸져 있는 영역이 화면에 표시될 영역들을 나타내며 현재 초기의 화면 구성은 'div'태그로 감싸져 있는 id="root"의 컴포넌트로 구성되어 있다. (위 화면!)
2. src/index.js
앞서 본 index.html의 동작을 담당하는 자바스크립트 파일이다. react app이 구동될 수 있도록 하는 진입파일 이라고도 한다.
내부 ReactDOM.render함수 내의 'App/'태그가 바로 작성된 컴포넌트 이름이고 이 컴포넌트는 index.html 파일 속 'root'로 나타내어 컴포넌트를 화면에 띄울 수 있도록 한다.
3. src/App.js
드디어 컴포넌트 등장. 본 파일이 컴포넌트를 구현한 자바스크립트 파일이다. 본 자바스크립트 파일 내의 여러 컴포넌트들을 정의하여 코드를 작성해두면 된다. 
컴포넌트 스타일은 Function 스타일과 Class 스타일로 나뉘는데 그 두개에 대한 설명은 추후에 다루도록 하겠다. (위 코드는 function style)
각 컴포넌트들의 return 값 내부에 코딩을 통하여 컴포넌트들을 제작한다.
주의! return 내의 컴포넌트 코딩은 단 하나의 상위 태그로 묶여있어야한다.
<div className="App"> // 여기에 코드 작성!! </div>
4. CSS파일 (App.css 와 index.css)
각각의 파일은 css파일로 하나는 index.html의 css문서, App.js의 css문서이다.
Style에 변경을 주고 싶을 때는 본 문서를 수정하면 된다.
정리하자면,
index.html은 가장 상위에 문서이고 여러 컴포넌트들을 하나로 집합 시켜줄 수 있는 공간이다.
App.js는 컴포넌트들을 작성해 저장해 둘 수 있는 공간이며
index.html 문서에 컴포넌트들을 불러 올 수 있도록 작동하는 역할을 index.js 파일이 해준다.
