[리액트] 자바스크립트 코딩하는 법

디렉토리 구조가 어떤지, 어디를 수정해야 코딩할 수 있는지

디렉터리 구조는,  src 와 public 으로 나뉜다.

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

 Create React App을 실행하면 나오는 첫 화면이 웹 브라우저상에서 index.html 이라는 파일을 실행한 결과이다.

 

 index.html 에서 중요한 부분은 <div id="root"></div> 이다.

 Create React App을 실행한 첫 화면에서 [검사] > [Element]를 선택하고 보면

 id가 "root"인 요소 안쪽에 리액트를 통해 만든 태그가 들어있는 것을 확인할 수 있다.

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

 

 그것은 src, 즉 소스(source)를 나타내는 디렉터리 안에 있는 파일들이다

 리액트 프로그래밍 시 대부분 파일은 src라는 디렉터리에 넣게 될 것이다.

 그 중 특히 앱의 진입점 역할을 하는 파일은 index.js이다. (index.js = APP.js를 불러온다!)

 

 index.js에서 주목할 부분은 document.getElementById('root')이다.((document) 문서에서 id속성으로 요소를 얻어온다.)

 이 부분은 id가 "root"인 요소를 선택하는 자바스크립트의 선택자 문법이다.

 (앱의 진입점 역할을 하는)index.js에서 <APP />이라고 적힌 부분은 리액트를 통해 만든 사용자 정의 태그,

 즉 컴포넌트이다. 컴포넌트의 실제 구현은 import APP from './App' 을 통해 가져온다. 

'./App'은 .js가 생략된 것으로, App.js 파일이라고 보면 된다.

 

브라우저의 개발자 도구에서 '태그의 실제 내용'과 'App.js'의 'App' 컴포넌트의 div 태그 안에 있는 내용이 같다.

 'App'이라는 사용자 정의 태그, 즉 컴포넌트를 실제로 구현한 것이다.

 

 Create React App이 구축해놓은 환경 덕분에 변경사항을 저장할 때마다

 웹 브라우저를 새로 고침해서 변경 사하이이 즉시 브라우저에 반영되기 때문에 매우 편리하다.

 

주의할 점은 리액트 컴포넌트는 하나의 태그 안에 들어가야 한다는 점이다.

즉, 바깥쪽에는 하나의 태그만 있어야한다.

// 에러가 발생하는 경우 1
class App extends Component {
	render() {
    	return Hello, React!!;
    }
}

// 에러가 발생하는 경우 2
class App extends Component {
	render() {
    	return <header></header><div className="App">Hello, React!!</div>;
    }
}

< 에러가 발생하는 경우 >