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