create react app에서 Javascript 코딩하는 방법 (public폴더, src폴더) feat. 클래스방식

코딩하기전에 디렉터리 구조부터 파악하겠습니다.

 

 

1. public 폴더

index.html 파일

우선 public 폴더에 들어가면 index.html 파일에 들어갑니다. 이 html 파일이 우선 UI가 어떻게 보이는지 설정해주는곳인데요, 여기서 눈여겨 볼만한곳이 빨간색 네모 박스 친 부분 입니다.

 

만약에 컴포넌트를 만들어갈때는 저기에 있는 "id=root"라는곳에 넣어야 합니다. create react app은 그렇게 약속을 했습니다.

 

그 컴포넌트 수정 과정은 다른 폴더 속에서 해야합니다.

 

 

 

 

2. src 폴더

컴포넌트를 수정하고 추가하는곳은 src폴더입니다.

그래서 개발작업을 할때는 거의 대부분 src폴더에서 이루어질 것입니다.

우선 index.js를 확인해 보겠습니다.

아까전에 언급한 root 부분이 index.js에서 연결된것을 확인하실 수 있습니다.

 

 

또한 중요한 부분은 <App/> 이라는 태그인데요, 그것이 바로 컴포넌트입니다!

그 App이라는 컴포넌트의 실제구현은 상단에 있는 " import App from './App' "으로 된것을 확인 하실 수 있습니다. 이것은 ./App.js가 풀내임이고 js가 생략된것입니다.

 

 

 

App.js 파일을 열어보면 함수타입으로 되어있을겁니다. 그것을 class타입으로 바꿔주세요.

 

 

 

코드수정

다음과 같이 코드를 수정하고 저장하면 알아서 reload를 해줍니다. 매우 편리합니다.

그리고 주의할점은

꼭 태그는 하나이상있어야합니다. 만약 저기서 div태그 없이 text만 입력한다면 오류가 납니다.

 

 

이로서 최소한 어느부분에 코드를 수정해야하는지 부분을 알게 되었습니다.