React 200제 (1~3번 실습)

2021.10.29일 기록

✅ React 개발환경 구축 완료 

 

001. .jsx에 html 적용하기

002. .jsx에 css 적용하기

003. Component 사용하기

 

 

001. .jsx에 html 적용하기

 

import React from 'react';로 리액트에 시작을 알리고

App()함수를 통해서 return을 html로 해주어 화면에 바로 출력될 수 있도록 진행한다.

002. .jsx에 css적용하기

App.css 작성

사용할 태그를 css에 작성해준다.

 

App.js 맨 위에 import 선언

앞서 만든 css를 사용하기 위해서 import시켜준다. 

파일 위치는 자기와 동일한 위치일 경우 >>   ./     점하나

자기보다 위에 있는 위치일 경우 >> ../     점 두개

 

적용된 web 페이지 화면

003. Component 사용하기

component란 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위를 말한다.

component를 파일 단위로 작성한 후 필요한위치에 import해 사용할 수 있다.

 

맨위에 {Component}로 import 선언을 해준다.Component를 extends 상속받아 사용해준다. 

return된 html코드를 render()함수를 사용해 화면에 표시해준다.

 

 

App.js파일 수정 >>

 

앞서 생성한 R003_ImportConponent를 맨위에서 import 해주고 시작한다.

해당 component를 사용할 부분에 <ImportConponent></ImportConponent>태그를 사용하여 출력해준다.

 

적용된 web 페이지 화면