클라우딩 어플리케이션 엔지니어링 TIL Day 27 - React 기초

지난 시간에는 Node.js에 대해서 배우고 설치까지 해보았다

오늘부터는 본격적으로 React에 대해서 배워보는 시간이다

오늘은 React 가 무엇인지, 어떻게 리액트 파일을 생성하는지, 문법은 어떻게 되는지 등 React 에 대한 전반적인 기초 지식에 대한 강의가 진행된다

강의를 들으며 중요한 내용을 잘 정리하고 추가로 궁금한 부분을 메모해두어야겠다

오늘도 그럼 화이팅!

---

# React

# React를 왜 사용할까?

1. 중복되는 코드를 컴포넌트화 시켜 재사용할 수 있다

2. 선언형 프로그래밍이다 -> 바로 목적을 말한다

3. Virtual DOM

 

# DOM이란?

Document Object Model 의 약자

브라우저가 HTML을 해석해서 보여줄 때 HTML을 트리 형태로 변경한 것

Virtual DOM을 사용하여 한번에 업데이트한다 -> 연산의 양이 줄어든다

즉 브라우저의 부하가 줄어든다

 

# Create React App

# React.js

Node.js 기반의 Javascript UI 라이브러리

 

# Webpack

다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리

 

# Babel

JSX 등의 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리

 

# Boiler Plate

복잡한 환경설정을 마친 패키지를 감싼 패키지

즉, 서비스를 개발할 수 있는 빵틀의 역할을 하는 패키지를 의미한다

 

리액트의 Boiler Plate는 Create React App 이다

//새로운 리액트 프로젝트 생성

npx create-react-app

npx create-react-app 으로 프로젝트를 생성하면 가장 기본적인 리액트 프로젝트가 자동으로 생성된다

파일 구조는 다음과 같으며

서버를 실행시킨 초기 화면은 아래와 같다

서버 실행은 npm start 를 입력하여 실행시킨다

 

초기 리액트 앱 화면 실행

리액트 앱은 노드 기반의 웹 서버 위에서 동작하며

localhost는 자신의 컴퓨터 안에서만 유효하다

---

# 리액트 앱 구조 분석

초기 파일 구조

파일 구조를 살펴보자

1. App.js

개발자 창을 열어서 전체 파일 구조를 살펴보니 div class="App" 이 div id="root" 아래에 위치되어 있음을 확인할 수 있다

 

2. index.js

index.js 안에 App 이 위치해있다

즉, index.js 파일 내에 최상위 컴포넌트를 지정할 수 있다

document.getElementById('root')

는 id가 root인 요소에 render 한다는 의미이다

그렇다면 root 라는 id를 갖는 div는 어디에 있을까?

 

바로 public 디렉토리 내부의 index.html에 있다!

따라서 리액트 앱이 실행되는 전체적인 흐름은 다음과 같다

1. 리액트 앱 실행

2. index.js 가 실행되며 최상위 컴포넌트를 인식

3. 최상위 컴포넌트를 index.html 내부의 id='root' 인 div 아래에 넣기

 

# 초기 파일 설정

사용하지 않는 파일들은 삭제한다

삭제된 파일을 import 하는 코드를 삭제해준다

---

# JSX

리액트에서 사용되는 html + js 문법

# 규칙

1. 닫는 태그가 필요하다, 반드시 모든 태그를 닫아야 한다

//example

<div></div>
<img />
<br />
...

2. 하나의 컴포넌트에는 반드시 최상위 태그가 필요하다

const Layout = (props) => {
  return (
    <>
      <Header />

      <main>{props.children}</main>
    </>
  );
};

export default Layout;

//Layout 태그의 최상위 태그 -> <></>

3. class를 지정할 때는 className="" 으로 써야한다

4. {} 를 사용해서 숫자나 문자열을 넣어줄 수 있다

    boolean 값이나 배열은 넣을 수 없다

---

# State

State를 설명하기 위해서 하나의 예시를 들어보겠다

1. 사람은 시간이 지나면 배가 고파진다 -> 밥을 먹는다

2. 배가 고픈 상태에서 밥을 먹으면 배가 불러진다 -> 소화시키려고 한다

3. 배가 불러진 상태에서 시간이 흐르면 다시 적당한 상태가 된다 -> 일상 생활을 한다

따라서 상태 즉 State란

계속해서 변화하는 특정 상태를 말한다

상태에 따라 각각 다른 동작을 하게 된다

//useState를 사용해서 데이터를 불러오는 로직
//해당 로직에서는 recoil의 값을 꺼내와서 초기값으로 설정해주고 있다

  // 초기값 설정
  const [name, setName] = useState(userData.name_kor);
  const [englishName, setEnglishName] = useState(
    userData ? userData.name_eng : ""
  );
  const [id, setEmployeeId] = useState(userData ? userData.com_id : "");
  const [department, setDepartment] = useState(userData ? userData.dep : "");
  const [position, setPosition] = useState(userData ? userData.rank_name : "");
  const [ssn, setSSN] = useState(userData ? userData.rrn : "");
  const [phoneNumber, setPhoneNumber] = useState(
    userData ? userData.mob_num : ""
  );

리액트에서 컴포넌트가 가진 state가 바뀌면 rerender 된다

state를 잘 활용하면 사용자의 이벤트를 감지해서 동적으로 바뀌는 웹페이지 구현이 가능하다

---

# Props

부모 컴포넌트에서 자식 컴포넌트로 어떠한 값을 전달하는 것을 Props 라고 한다

// 부모 컴포넌트

function App() {
	return (
    
    	<div>
        	// 자식 컴포넌트에게 Props 전달
        	<Counter initialValue={5} />
        </div>
    );
};

export default App;

// 자식 컴포넌트

// 부모 컴포넌트로부터 받은 데이터 props로 받음
const Counter = (props) => {
...

Props가 여러개라면 전체를 객체로 분리해서 한번에 전달하자

// 부모 컴포넌트

function App() {

	const counterProps = {
    a:1,
    b:2,
    c:3,
    d:4,
    e:5,
    initialValue:5
    }
    

	return (
    
    	<div>
        	// 자식 컴포넌트에게 Props 전달
            // 여러개일 때는 spread 연산자 사용하기
        	<Counter {...counterProps} />
        </div>
    );
};

export default App;

defaultProps 를 지정해주면 부모 컴포넌트에서 깜박하고 빼먹어도 자식 컴포넌트에서 지정한 기본값으로 설정된다

컴포넌트 사이에 jsx 요소가 들어가면 최상단 컴포넌트의 자식 요소로 해당 jsx 가 전달된다

---

# 새로 알게 된 점

이번 강의를 통해서 Props에 대해서 더 이해할 수 있게 되었다

부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 수 있다는 것은 알고 있었지만

매번 하위 컴포넌트로 값을 내려줄 때마다 헷갈렸었다

어떠한 데이터를 부모 컴포넌트에서 어떤 이름으로 보내주어야 하며 자식 컴포넌트에서는 어떻게 받아야 하는지에 대한

완벽한 이해 없이 예시 코드들을 참고해서 프로젝트를 만들곤 했었는데

Props에 대한 설명을 들으며 어떠한 원리로 값을 전달하는지 이해하게 되었다

다음 강의부터는 간단한 일기장 프로젝트 실습이 진행되는데 재미있을 것 같다!