[React] JS 코딩부터 시작

 

create-react-app이 제공하는 샘플 앱을 우리가 수정하는 것으로 시작해보자

어떤 디렉터리 구조인지, 어디를 수정하면 코딩을 할 수 있는지 알아보았다.

 

public이라는 디렉터리는 index.html 이 있는 곳이다.

react로 만들어진 애플리케이션이 웹브라우저에서는 index.html을 실행한 결과이다. 

index.html에서 우리가 신경 쓸 부분은 div 태그에서 id="root" 인 부분이다.

리액트를 통해서 컴포넌트들을 만들고 그 컴포넌트들을 이 root 안으로 들어가도록 create-react-app은 약속을 해놓았다.

 

create-react-app이 기본설정한 웹 브라우저의 html을 보면 id가 root 인 태그 안쪽에 react를 통해서 만든 태그들이 들어간 것을 볼 수 있다.

 

 

 

그럼, id가 root인 태그 안에 들어가는 컴포넌트들은 어떤 파일을 수정해서 만들 수 있을까?

src(source)라고 되어있는 디렉터리 파일들을 수정하여 만든다.

그 중 진입파일은 index.js이다.

눈여겨봐야하는 부분은 document.getElementById('id') 이다.

id값이 root인 태그를 선택하는 자바스크립트의 선택자 문법이다.

 

<APP /> 이라고 적혀있는 부분은 리액트를 통해 만든 사용자 정의 태그 즉 컴포넌트이다. 지금은 create-react-app 이 샘플로 만든 컴포넌트이다.

이 실제 컴포넌트의 구현은 App.js에 되어있고 import를 통해서 App(.js) 파일을 가져온다.

App.js는 index.js 파일과 같은 깊이에 있다.

 

 

App.js 파일은 이렇게 생겼다. 

이 때 App.js 파일 생김새가 함수 형식, 클래스 형식이 있는데 생활코딩 수업에서는 클래스 방식을 사용했기 때문에 클래스 방식으로 바꿔주었다.

리액트는 반드시 하나의 태그 안 쪽에 나머지 태그들이 있어야한다.

가장 바깥쪽에는 태그 하나만 있어야한다.

 

 

가장 바깥쪽에 태그가 없거나 두 개 이상이라면 오른쪽과 같이 오류가 일어날 것이다.