이번에는 부트스트랩 웹페이지 실습 소스를 이용해 모듈화 하는 실습을 진행한다. 1. 예제 페이지 프로젝트 셋팅 https://startbootstrap.com/previews/new-age 해당 웹페이지에서 소스코드를 다운로드 한다. 압축을 풀면 파일은 이렇게 들어있다. css와 assets 폴더를 public 폴더 안에 그대로 넣어준다. index.html에 있는 내용은 프로젝트에 있는 index.html에 덮어주고, body 내용은 app.js에 넣어준다. 로 되어있는 주석을 찾아바꾸기로 {/* */}로 바꿔주고. 스타일의 경우도 {{style=}} 이렇게 바꿔준다. (참고로 max-width가 리액트 jsx에서는 maxWidth이다.) 실행해보면 부트스트랩 예제 페이지와 동일한 페이지가 생성된다. ..

컴포넌트는 화면을 구성하는 단위이다. 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트 두가지가 있다. 1. 클래스형 컴포넌트 상태를 알수있는 값인 state를 사용할 수 있는 컴포넌트 render를 무조건 위치해야 한다. class 앞에 export default라는 의미는 외부에서 참조할 수 있게 선언한다는 의미이다. App.js에서 import를 해서 사용 해보자. App.js에 필요없는 부분을 지우고 ClassComponent를 참조하게 한다. 2. 함수형 컴포넌트 상태값이 없는 단순한 컴포넌트 함수형 컴포넌트 또한 동일하게 export default를 붙여 생성을 해준다. 함수형 컴포넌트는 render()가 필요 없다. 함수형 컴포넌트는 한개의 태그를 반환해야 하기 때문에 Fragment 태그를 추..