사실 React는 잠깐 속성으로 빠르게 공부하고 화면 뿌리는건데 뭐 대충 하면 되지~
하면서 대충 배웠었다.
하지만 최근에 문득 든 생각이 전에 배운 것인데 정말로 이것을 내것으로 만들고 싶다는 욕심이 생겼다.
또한, 진정으로 내가 이해하고 사용했다고 하기도 애매하기도 했다. 왜그러냐면 그냥 배낀거니까 말이다.
무엇이 그렇게 급했는지, 길게 보고 제대로 배워야 하는 지식들을 내몸에 사는 나쁜 벌레인 대충으로 무너지고 말았다.
그러므로 React에 대해서 다시 한번 차근차근 공부해서 마스터하는 시간을 가지도록 하겠다.
아니 하던 자바나 하지 뭐하냐고? 결국 다 알아야 하는 겁니다...
출처 사이트는 다음과 같다.
https://ko.reactjs.org/tutorial/tutorial.html#setup-option-1-write-code-in-the-browser
https://www.c-sharpcorner.com/article/what-and-why-reactjs/
1. 리액트란 무엇인가?
React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.
2. 리액트의 특징은?
- 선언적이다
- 간단하다
- 컴포넌트 기반이다.
- 서버 측을 지원한다.
- 확장 가능하다.
- 빠르다
- 배우기 쉽다.
솔직히 배우기 쉬운거는 너무 만만하게 보는 것 아닌가 한다. 도대체 뭐가 쉬운가야? (쒸이익...) 사실 x나 어렵다...
React에는 특하게 JSX( JavaScript eXtention)라는 것이 존재한다.
3. React의 장점
3-1. 필요한 부분만 다시 그려준다.
Reac는 변화를 계산하고 browser를 수정하는 인 메모리(in-memory) 데이터 구조 캐시를 생성한다. 이것은 개발자에게 마치 전체 페이지가 각각 변화해서 그려진것 처럼 코딩하는 것을 가능하게 한다. 사실은 react library가 실제 변한 컴포넌트만 그리지만 말이다.
다시 이야기하자면, react의 경우 전체 페이지 중에서 한 부분을 수정할 때, React library가 내부적으로 나머지 부분은 그대로 두고, 수정된 부분만 그려준다는 말이다.
기존에는 DOM을 직접 조작해서 화면에 나타내는 방식이었는데 이렇게 되면 하나가 변해도 새롭게 페이지를 다시 rendering해야 했다. 하지만 React의 경우에는 Virtual DOM을 이용해서 이를 개선했다. 불필요한 작업이 사라진 것이다.
3-2. 컴포넌트 기반으로 화면 구성
만일 동일한 화면 부분이 모든 곳에 일정하게 들어가게 된다고 가정해 보자.
여기서 10개의 페이지를 다 생성해서 코드를 집어 넣었는데 아니... 수정을 해야 한다고 한다.. ㅠㅠ... (Shotgun Surgery)
그러면 어쩔수 없이 10개 페이지를 전부 찾아서 수정된 것을 적용해야 한다.
React의 경우에는 컴포넌트 기반으로 화면을 구성할 수 있다. 그러면 독립적으로 관리가 되는데 잘 캡슐화된 컴포넌트를
잘 조립하게 되면 ...
원하는 화면을 쉽게 만들 수 있고 또한 반복 적용되는 부분을 수정하기 위해 전부 찾는 일은 더이상 없을 것이다.
재사용정이 증가하며 이에 더불어 유지보수에 쉬울 것이라는 판단이다.
3-3. 한 방향 데이터 흐름(Single Way Data Flow)
부모 컴포넌트로 부터 자식 컴포넌트로만 데이터 전달이 가능하다.
이렇게 한 방향으로 데이터 흐름이 고정이 된다면 추후에 어디서 이게 변한것인지에 대한 걱정을 덜어도 되는 것이다.
4. React App 만들기
4-1. boilder plate 를 이용한 react 다운로드
그러면 간단하게 boilder plate를 이용해서 React를 사용해 보겠다.
boilder plate는 해석하면 빵굽는 판인데, react를 사용하는데 기본적으로 필요한 것을 편리하게 사용할 수 있도록 도와주는 기능이다.
필자는 vs code를 이용해서 react-study라는 폴더 에서 react-practice안에 react boilder plate 를 다운받았다.
ctrl + j를 누르면 terminal창을 vs code에서 띄우는데 그 안에 원하는 폴더 안에서 원하는 이름으로 다운받으면 된다.
참고로 npx, node, npm이 다운로드 되어 있는지 확인하고 있어야지 react 파일이 다운될 것이다.
npx -v
node -v
npm -v
npx create-react-app react-practice
다운을 완료하면 npm start를 입력하면 react에서 기본적으로 제공하는 화면이 나온다.
4-2. 구조 파악하기
그러면 다운로드 받은 파일들을 한번 살펴보겠다.
여기서 index.js를 먼저 보자.
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
React는 컴포넌트 기반의 UI 라이브러리이다.
ReactDom은 전달한 컨테이너 노드의 콘텐츠를 제어한다. root라는변수로 index.html에 현재 존재하고 있는 id가 root인 tag 정보를 가져온다.
그리고 그 안에 component로 분리되어 있는 <App />을 넣어주는 것이다.
그러면 App component에서 return 해주는 tag가 id가 root인 tag안으로 들어가는 것이다.
reportWebVitals는 React의 성능을 측정하기 위한 것이다.
React.StrictMode는 애플리케이션의 잠재적 문제를 알아내기 위한 도구다.
그렇다는데 글쎄... 개발 모드에만 영향을 미친다고 한다.
App.js
import "./App.css";
function App() {
let name = "키메라 끼에ㅔ엥ㄱ";
return (
<div className="App">
<header className="App-header">hello React! with... {name}</header>
</div>
);
}
export default App;
이렇게 바꾸면 우리가 원하는 대로 값이 잘 나올지 의문이다. 과연....
짜잔! 이렇게 잘 나왔다.
그러면 component를 추가해 보겠다.
Header.js
const Header = () => {
return <div>header</div>;
};
export default Header;App.js
import "./App.css";
import Header from "./Header";
function App() {
let name = "키메라 끼에ㅔ엥ㄱ";
return (
<div className="App">
<Header />
<header className="App-header">hello React! with... {name}</header>
</div>
);
}
export default App;
이번에는 react는 무엇인지 간단하게 알아보았고 boilder plate를 이용해서 react 서버를 띄워 보았다.
다음에는 react 에서 데이터를 다루는 방법인 state, props에 대해서 공부할 것이다.
'programming language > react' 카테고리의 다른 글
| [React] React Router 파해치기 (0) | 2022.06.12 |
|---|---|
| [React] useReducer / React Router 사용하기 (0) | 2022.06.12 |
| [React] React.memo, useCallback사용하기 (0) | 2022.06.11 |
| [React] React Hook - useContext, useRef, useMemo 적용하기 (0) | 2022.06.10 |
| [React] Props와 State 이해하기 / Hook(useState, useEffect) 적용 (0) | 2022.06.07 |