리엑트란?
리엑트를 사용하는 이유는 Single Page Application(SPA)때문이라고 합니다. 간단하게 이야기하면 오직 하나의 HTML을 사용한다는 겁니다.
그렇기에 페이지에 변화가 생긴다면 단순히 해당 부분에 대한 변경을 통해 별도의 새로고침 없이 페이지의 내용을 변경해줍니다.
또한, JSX라는 문법을 통해서 쉽고 간편하게 html을 보관할 수 있습니다.
리엑트 설치
- 해당 [링크][0]에서 Node.Js LTS 버전을 설치합니다.
- 해당 [링크][1]에서 vsCode 에디터를 설치합니다.
- 앞으로 리엑트를 개발할 폴더를 생성합니다.
- 해당 폴더를 vsCode 에디터에서 엽니다.
- 상단에 있는 Terminal -> New Terminal을 통해 터미널을 엽니다.
- 다음과 같은 명령어를 입력합니다.
1
npx create-react-app .
해당 단계를 잘 따라오셨으면 설치 중이라는 메세지가 뜬 이후 아래의 명령어를 입력해 react를 실행 시킬 수 있습니다.
1
npm start
리엑트 써보기
자 그러면 작업 폴더 내부에 src/App.js 라는 파일을 수정해봅시다.
1
2
3
4
5
6
7
8
9
10
11
12
//App.js 파일
import "./App.css";
function App() {
return (
<div className="container">
<p>안녕하세요! </p>
</div>
);
}
export default App;
위와 같이 수정한 뒤 저장을 하면 npm start를 입력할 당시 생성된 창(http://localhost:3000/)에서 우리가 입력한 “안녕하세요!”가 출력되는 것을 확인 할 수 있습니다.
결국 return 안에 있는 html이 출력되는 것을 확인 할 수 있습니다.
마찬가지로 /src/App.css의 내용을 다음과 같이 수정하면 css 또한 손쉽게 적용 되는 것을 확인 할 수 있습니다.
1
2
3
4
5
6
7
.container {
width: 100%;
height: 50vh;
color: #fff;
background-color: blueviolet;
text-align: center;
}
자, 그러면 공통사항을 확인해 보았으니, 이제 차이점을 확인해봅시다.
- 먼저 class 대신, className을 사용합니다.
- {}를 이용해 변수를 html에 넣을 수 있습니다.
이는 아래 예시를 통해서 확인하겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
import "./App.css";
function App() {
const 인사말 = "안녕하세요";
return (
<div className="container">
<p>{인사말}</p>
</div>
);
}
export default App;
간단하게 인사말이라는 변수를 설정한 뒤 {}를 통해 미리 저장한 변수를 p태그의 내용으로 설정 할 수 있습니다. 마찬가지로 className도 같은 방식으로 설정이 가능합니다.
- 이와 비슷하게 style도 적용 할 수 있습니다.
다만 조금의 차이점은, style = {} 안에 {} 자료형으로 넣으면 됩니다.
1
<div style=> 글씨 </div>
useState
리엑트는 아래와 같이 state를 사용하여 데이터를 저장 할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
import { useState } from "react";
import "./App.css";
function App() {
const [인사말, 인사말정하기] = useState("안녕하세요");
return (
<div className="container">
<p>{인사말}</p>
</div>
);
}
export default App;
이러한 state의 특징은 실시간으로 state의 변화를 감지하여 렌더링해준다는 점입니다.
이후 추후에 onClick와 같은 기능을 이용해 state의 값을 변경하면 이를 감지해 html의 값을 변경 할 수 있습니다.
그리고 useState를 사용할 때 배열 형식으로 2개의 변수를 지정한다는 점을 확인하셨나요?
첫번째 index의 변수는 해당 useState의 값을 뜻하고, 두번째 index의 변수는 해당 useState의 값을 변경하는 함수입니다.
이에, 위의 예제에서 “인사말정하기”와 같은 함수를 사용해 “안녕하세요”를 다음과 같이 바꿀 수 있습니다.
1
인사말정하기("반갑습니다.");
아래는 이를 활용하는 간단한 버튼 예제입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { useState } from "react";
import "./App.css";
function App() {
const [인사말, 인사말정하기] = useState("안녕하세요");
return (
<div className="container">
<p>{인사말}</p>
<button
onClick={() => {
인사말정하기("반갑습니다");
}}
>
인사말 바꾸는 버튼
</button>
</div>
);
}
export default App;
useEffect
리엑트는 useEffect를 이용해 상태변화를 감지 할 수 있습니다.
1
2
3
4
5
6
7
useEffect(() => {
first;
return () => {
second;
};
}, [third]);
useEffect는 위와 같은 형태를 띄고 있으며 first는 컴포넌트가 mount 될 때, return은 unMount될때 작동한다.
그리고 third 배열 값을 이용해 특정 값이 변할 때 코드를 실행 시킬 수 있다.
[0] : https://nodejs.org/ko
[1] : https://code.visualstudio.com/Download