React 구조

Published: by Creative Commons Licence

React

위 포스트는 인프런 - 따라하며 배우는 노드, 리액트 시리즈 - 기본강의 를 들으며 리액트 부분만 정리를 하였습니다.

초기 React 구조

  • node_modules
  • public
  • src
    • webpack이 관리해준다(public은 안해줌). 그래서 img 같은거 넣고 싶으면 src 안에 넣어줘야지 webpack이 관리해준다.
    • App.js
      • 페이지가 렌더링 되고 있다.
    • index.js
      • index.js 안에 App 컴포넌트가 들어가 있다.
      • ReactDOM.render() 함수 안에 보여주고 싶은 컴포넌트를 넣으면 그 페이지가 렌더링된다.
        • ReactDOM.render(, document.getElementById('root'));
          • public -> index.html 파일의 <div id="root"> </div> 위치에 App 컴포넌트를 사용한다는 의미가 된다.
    • serviceWorker.js
    • setupTests.js
  • package.json