라벨이 시작하기인 게시물 표시

React 시작하기

이미지
 이제 React에 대한 기본적인 설명 및 데모를 하도록 하겠습니다. public폴더 안에 index.html 파일이 있습니다. 31번째 줄에 id가 root인 div가 있는데 실제적으로 코딩을 하면 위 div에 React내용이 들어가게 됩니다. 7번째 줄에 ReactDOM.render가 실제적으로 root가 id인 부분에 랜더링을 해서 React로 화면을 만드는 것입니다. 9번째줄에 <App />은 실제적으로 React로 코딩한 부분이 들어가게 됩니다.  물론 id가 root일 필요는 없습니다. 만약 다른id로 React를 랜더링 하고 싶다면 11번째 줄에 getElementById의 대상을 바꾸면 됩니다. 이제 App.js에 가서 코드를 수정하겠습니다. 7~20번째 줄까지 모두 지워줍니다. 이제 위 사진처럼 7번째 줄에 <h1>Hello World</h1>을 작성하고 저장합니다. npm start을 하면 Hello World가 가운데 브라우저 창에 생성된 것을 알수 있습니다. 다음은 읽지 않아도 되지만 다음 글을 빨리 따라가기 위해서 참고해 주셨으면 합니다. 삭제 파일 목록 - App.test.js, logo.svg, setupTests.js 그리고 App.js파일에 가서 'import logo from './logo.svg'; 지우기 이전 글 : React 설치법 이후 글 : React(Class) - 다른 compoment로 전달