0. CRA로 Client 프로젝트 생성
여기선 npm 대신 yarn을 사용한다. CRA 를 설치하는 과정은 생략한다.
1. .jsx에 HTML 적용하기
CRA(creare-react-app) 탬플릿으로 프로젝트를 생성하면, App.js 의 html 코드를 이용해 홈화면을 그려준다. 아래 코드는 스타일이 적용되지 않은 HTML 코드만 삽입한 상태 이다.
// ./app.js
import React from 'react'
const App = () => {
return (
<div>
<h1>Start React 200!</h1>
<p>HTML 적용하기</p>
</div>
)
}
export default App실행 결과
2. .jsx에 CSS 적용하기
스타일을 적용하는 방법에는 css코드를 html 코드 내부에 직접 삽입하는 방법, html 코드가 있는 파일에 함께 정리하는 방법, css코드 파일을 따로 작성해서 import 후 사용하는 방법 이렇게 3가지로 정리 할 수 있다. 여기에서는 3번째 방법을 이용한다.
아래처럼 App.css 를 임포트 한다. 경로가 맞는지 주의할 것!
// ./app.js
import React from 'react'
import "./App.css" // App.css 를 import 한다.
const App = () => {
return (
<div>
<h1>Start React 200!</h1>
<p>HTML 적용하기</p>
</div>
)
}
export default App기존 내용은 모두 지우고 아래 처럼 스타일시트를 작성한다.
css 코드에 대한 설명은 생략한다.
div {
background-color: rgb(162, 127, 243);
color: rgb(255, 255, 255);
padding: 40px;
font-family: 고딕;
text-align: center;
}
h1 {
color: white;
background-color: #2EFE2E;
padding: 10px;
font-family: 궁서;
}실행결과
3. Component 사용하기
컴포넌트란? 재사용이 용이한 코드 블럭이라고 생각하자.
component 는 한 파일내에서 작성할 수도 있지만
대체적으로 파일 단위로 작성한 후 필요한 위치에서 임포트해 사용한다.
클래스형 Component vs 함수형 Component
이제는 잘 사용하지 않지만, 그래도 클래스형 컴포넌트에 대해서 알아보자. 앞으로 클래스형 컴포넌트를 사용하는 일은 거의 없겠지만 그래도 알아둘 필요는 있다. 나중에 클래스형 컴포넌트를 사용하는 프로젝트를 유지보수하게 되는 일이 있을 수도 있고, 함수형 컴포넌트 + Hooks 로 못하는 작업이 2개정도 있다고 한다. 추가적으로, 옛날에 만들어진 리액트 관련 라이브러리의 경우에는 Hooks 지원이 아직 안되는 경우도 있고, react-native 관련 라우터 라이브러리인 react-native-navigation 의 경우에도 클래스형 컴포넌트를 어쩔 수 없이 써야 하는 일이 종종 있다.
src 폴더 아래에 R003_ImportComponent.js 파일을 생성하고 아래와 같이 코드를 작성한다.
// 클래스형
// ./R003_ImportComponent
import React, { Component } from 'react'; // 여기서 import한 component를 상속받아
class R003_ImportComponent extends Component { // 여기에서 사용한다.
render () {
return ( // return 된 html 코드를 render() 함수를 사용해 표시한다.
<h2>[ THIS IS IMPORTED COMPONENT ]</h2>
)
}
}
export default R003_ImportComponent;
함수형 component는 아래와 같이 작성한다.
// 함수형
import React from 'react'
const R003_ImportComponent = () => {
return (
<div>[ THIS IS IMPORTED COMPONENT ]</div>
)
}
export default R003_ImportComponentApp.js 파일과 같은 경로에 위치한 R003_ImportComponent.js 파일을 임포트해서 사용한다.
// ./App.js
import React from 'react'
import "./App.css"
import ImportComponent from './R003_ImportComponent' // R003_ImportComponent.js 파일을 임포트
const App = () => {
return (
<div>
<h1>Start React 200!</h1>
<p>HTML 적용하기</p>
<ImportComponent></ImportComponent>
</div>
)
}
export default App실행 결과
4. 생명주기 함수 render() 사용하기
react에서 생명주기란, component의 생성, 변경, 소멸 과정을 뜻한다. 앞으로 학습할 render(), constructor(), getDerivedStateFormProps(), componentDidMount() 함수들은 component의 "생성" 과정에 속한다
sre 폴더 아래에 R004_LifecycleEX.js 파일 생성후 아래와 같이 작성
render() 함수는 리턴되는 html 형식의 코드를 화면에 그려주는 함수다.
// './R004_LifecycleEX'
import React, { Component } from "react";
class R004_LifecycleEX extends Component {
render() {
console.log("3. render Call"); // rander 함수가 실행될 때 콘솔을 찍어보자
return <h2>[ THIS IS RENDER FUCNTION ]</h2>;
}
}
export default R004_LifecycleEX;
App.js 에 작성한 R004_LifecycleEX component를 이식한다.
// "./App.js"
import React from 'react'
import "./App.css"
import LifecycleEX from './R004_LifecycleEX' // 임포트 해서 사용
const App = () => {
return (
<div>
<h1>Start React 200!</h1>
<p>HTML 적용하기</p>
<LifecycleEX></LifecycleEX>
</div>
)
};
export default App;
실행 결과
크롬에서 개발자 도구를 열어 확인해보면 console 에 출력된 log를 볼 수 있다.
5. 생명주기 함수 constructor(props) 사용하기
src 폴더 아래에 R005_LifecycleEX.js 파일을 생성한 후 아래와 같이 작성한다.
// './R005_LifecycleEX'
import React, { Component } from 'react';
class R005_LifecycleEx extends Component {
constructor(props) {
super(props);
this.state = {};
console.log('1. constructor Call');
}
render() {
console.log('3. render Call');
return (
<h2>[ THIS IS CONSTRUCTOR FUCNTION ]</h2>
)
}
}
export default R005_LifecycleEx;constructor() 함수는 생명주기 함수 중 가장 먼저 실행되면 최초 한회만 호출된다.
component 내부에서 사용되는 변수(state) 를 선언하고 부모 객체에서 전달받은 변수(props)를 초기화 할때 사용한다.
super() 함수는 가장 위에 호출해야 한다.
App.js는 아래와 같이 수정한다.
// ./App.js
import React from 'react';
import './App.css';
import LifecycleEx from './R005_LifecycleEX'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<LifecycleEx></LifecycleEx>
</div>
);
}
export default App;실행 결과
console 을 확인해 보면 "1. constructor Call", "3. render Call" 이 잘 찍힌 걸 알 수 있다.
왜 console이 두번씩 찍힐까?
이유는 Strict 모드 때문이다
리액트 공식문서 내용
StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다.💥주의
Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다.
꼭 index.js에 쓰지 않아도 되고 부분적으로도 사용할 수 있다고 하는데... 개발모드에서만 영향을 끼치고, 잠재적인 이슈를 알려준다고 하니 굳이 안지워도 되지만, 두번 랜더링 되는게 보기 거슬린다면 주석처리를 하거나 삭제하면 된다.
