[React] JSX을 활용하여 Component의 CSS 적용하기 (Header, Footer)

---

React Component란?

---

React Component란 리액트로 만들어진 앱을 이루는 최소한의 단위로 화면에 보여지는 UI 요소를 컴포넌트 단위로 구분하여 구현할 수 있다.

 

Create React App을 통해 생성된 리액트 프로젝트에서 JSX를 활용하여 Component를 추가할 수 있다.

 

 

 

 

---

JSX란?

---

JSX란 JavaScript XML의 줄임말로 Javascript에 XML을 추가하여 확장한 문법이다.

Java Script와 HTML을 하나의 파일로 작성할 수 있기 때문에 비교적 편리하다.

 

자세한 내용은 React 페이지 -> https://ko.reactjs.org/docs/introducing-jsx.html

 

 

 

 

---

JSX을 활용하여 Component의 CSS 적용하기 (Header, Footer)

---

1. React 프로젝트 생성

▶ Create React App을 통해 React 프로젝트 생성한다.

 

VS Code에서 React 프로젝트 생성 방법 -> https://break-time-for.tistory.com/entry/React-VS-Code로-Create-React-App-사용하기

[React] VS Code로 Create React App 사용하기

 

2. React App 실행

▶ React App을 실행하기 위해 아래 코드를 기입하여 시작한다.

npm start

 

Project Start

 

▶ 프로젝트를 시작하면, 아래 코드가 실행되며 웹 브라우저가 구동이 된다.

해당 웹 브라우저에서 바로 추가되는 Component를 확인하면서 진행하고자 하여, 해당 웹 브라우저는 옆에 계속 열어두고 진행하려고 한다.

Project Start 웹 브라우저

 

3. Header, Footer Component 추가

▶ React 프로젝트의 src 폴더 하위에 [Header.js] 파일과 [Footer.js] 파일을 추가하여 Component를 추가한다.

 

JSX를 활용하여 Component 생성 방법 (Header, Footer) -> https://break-time-for.tistory.com/entry/React-JSX를-활용하여-Component-생성하기-Header-Footer

[React] JSX를 활용하여 Component 생성하기 (Header, Footer)

 

4. Header, Footer js의 ClasssName 추가

▶ CSS 서식을 추가하기 위해 3번에서 생성한 Component의 ClassName을 부여하여 준다.

Header.js

Footer.js

 

5. Header, Footer의 CSS 추가

▶ 프로젝트의 src 폴더 하위의 [App.css]파일을 수정하여 Header, Footer의 서식을 추가한다. 

Header 영역의 경우 배경색을 노란색으로 하였고, Footer 영역의 경우 배경색을 초록색으로 css 서식을 추가하였다.

.header_space{
  background-color: yellow;
}

.footer_space{
  background-color: green;
}

App.css

 

▶ [App.css]와 [Header.js], [Footer.js]를 저장하면 웹 브라우저는 자동으로 수정된다.

혹시 파일 저장을 해도 수정이 안 된다면, 웹 브라우저를 [새로고침]하면 된다.

 

아래 그림과 같이 기존 브라우저에서 [App.css]에 추가한 Header와 Footer의 서식이 나오는 것을 볼 수 있다.

 

웹 브라우저 (Header 서식 추가)

웹 브라우저 (Footer 서식 추가)

 

 

 

 

Header와 Footer 외에도 다양한 Component를 추가하고,

해당 Component의 CSS를 변경하여 스타일도 수정하며 웹 브라우저의 UI를 마음껏 구성할 수 있다 !