역시 뭔가 새로운 도구를 익히기 시작했으니 정석인 Hello world를 한 번 외쳐봐야 하지 않을까 ㅎㅎ
2. 파일 정리
리액트 앱을 처음 보면 무슨 파일과 폴더가 굉장히 많이 생성되어있다.
이렇게 많이 있는데 나는 다 아는 것은 오히려 처음 시작하는데에는 독이라 생각되서 최소한의 것을 남겨두고 다 정리해줬다.
그리고 react를 처음 익히면서 src폴더 안에 있는 것들만 조작했고 다른 public이나 node_modules는 거의 건드린 적이 없었다.
사용하면서 보니 node_modules는 해당 앱에서 npm으로 설치한 모듈들을 관리(?)해주는 것 같다. global로 설치하지 않으면 node_modules에 설치된다.
public에는 열어보면 index.html파일이 있다. 파일을 열어보면 코드 중에 id가 root인 div를 찾아 볼 수 있다.
앞으로 react에서 만든 모든 컴포넌트드를 저 div에 띄우는 것이라고 알아 두면 편할 것 같다.
3. Hello World
각설하고 src폴더에 App.js로 가보자.
맨 처음 App.js에 들어가보면 여러 코드가 작성되어 있다.
다 필요없고 지우고 아래와 같이 작성했다.
이렇게 작성하고 서버를 켜서 보면
짜잔~ Hello World!
간단히 보면 export default App을 통해서 App이라는 함수를 다른 곳에서 사용할 수 있도록 해준 것인데,
그럼 어디서 이걸 사용하는지 찾아보니
src/index.js에서 사용하고 있다.
App을 가져와서 하나의 태그로써 사용하고 있다.
그리고 아까 public/index.html에서 봤던 id가 root였던 div가 있는데, 여기서 그 div에 render를 하는 것이라 보면 된다.
즉,
1. Hello World를 작성한 App.js의 App 함수가 index.js에서 사용됨
2. index.js가 public/index.html에서 렌더링 됨
이렇게 나는 이해했다.
이외에 css파일에 기본적으로 있던 코드들은 깔끔히 지웠다.
