[구구스터디] 2. React 기초

☑️ DOM / Virtual DOM

DOM이란

Document Object Model의 약자로, HTML, head, body와 같은 태그들을 JS가 이용할 수 있는 객체를 의미한다.
ps) div, input, a 등이 DOM에 해당한다.
즉, DOM이 존재하기 때문에 JS는 HTML 태그들을 수정할 수 있다.

Virtual DOM이란

Virtual DOM은 실제 DOM을 모방하는 형태로 메모리 상에서만 존재하는 가상의 DOM을 의미한다.
변화가 실제 DOM에 적용되기 전에 가상의 DOM을 한번 거쳐 미리 처리하고 저장한 후 실제 DOM에 업데이트 할 수 있게 해준다.
그래서 수정 사항이 있더라도 매번 새로고침되지 않고, 바뀐 부분만 적용시키기 때문에 속도도 빠르고 효율적이다.

자바에서 JVM(Java Virtual Machine)과 비슷한 개념인 것 같다.

React는 Virtual DOM을 이용하는 대표적인 자바스크립트 라이브러리이다.
이것이 React의 이점이며 사용하는 이유이다.

---

☑️ 기본 용어 정리

아래 사진은 React Lifecycle(생명주기)이라고 한다.
정확한 시스템을 이해하기보다는 공부하면서 자주 나오는 개념/용어들 위주로 정리해보았다.

맨처음 component가 render될때는 mount 과정을 거친다.
그러나 props나 state가 변경되어 render 될 때는 mount를 거치지 않는다.

• Mounting : 컴포넌트가 최초로 나타낼 때를 뜻한다.
• Rendering : 컴포넌트가 마운트 된 후 컴포넌트가 호출 될 때를 뜻한다.
• unMount : 컴포넌트가 사라질 때를 뜻한다.

• component : 자바스크립트 함수와 비슷하다. 임의의 입력(props)을 받아들이고 어떤 게 화면에 나타나야 하는지를 설명하는 React 요소를 반환한다. / div와 비슷한 개념.
• props : 부모 component가 자식 component에 값을 전달할 때 사용하는 것이다.
• state : component 자기 자신이 가지고 있는 값이다. 변화가 필요할 경우 setState()함수를 통해 값을 변경해줄 수 있다.

정리하자면, 컴포넌트component가 처음 나타날 때를 마운트Mount라 부르고, 그 이후에 값이 변경되어 컴포넌트가 변경된 상태에서 나타날 때를 렌더링Rendering이라 한다.

---

☑️ React 기초 개념

useState

function App(){
	const [amount, setAmount] = React.useState(0);
	const [flipped, setFlipped] = React.useState(false);
  ...
  
};

이전에 바닐라JS를 사용할 때는 어떠한 값을 바꿔줄 때마다 rendering 해줘야했다.
그러한 경우에 굉장히 비효율적인 코드가 만들어지는데, 이럴 때 state를 사용하는 리액트에서는 효율적으로 해결이 가능하다.

위 코드의 첫 번째 줄은 변수amount의 default값을 0으로 설정해주고, 이 변수를 변환하는 함수setAmount도 같이 선언해주었다.
즉, 변수 amount의 값을 바꿀 때마다 매번 직접 rendering 해주지 않아도 setAmount 함수가 알아서 해주기 때문에 코드가 간단해지는 것이다.
그 아랫줄도 마찬가지.

Props

특정 버튼을 눌렀을 때, 어떠한 효과가 나타나게 하기 위해서 setState만 사용해서 코드를 짜면 너무 복잡하다.
이럴 때 props를 사용하면 더 간단하게 작성할 수 있다.
다시 말해서, Btn이라는 component에 props를 통해 값을 전달할 수 있다!

하지만 여기서 몇 가지 문제점이 발생할 수 있다.
1. props를 전달할 때, 새롭게 render하지 않아도 되는(즉, props를 전달하지 않는) component들도 같이 render된다.
이럴 때 memo()를 사용한다.

const MemorizedBtn = React.memo(Btn);

2. 타입을 정해주지 않았을 때 오류가 발생하지 않는데, 이를 해결하기 위해 props에 대해 dataType을 정할 수 있다.

<div>
  <MemorizedBtn text={18} fontSize={value} changeValue={changeValue} />
</div>

위와 같이 타입을 정해주지 않아도 JDX에서는 잘못된 것이 없다고 인식한다.
그래서 아래와 같이 지정 타입을 정해줄 수 있다.

MemorizedBtn.propTypes = {
      text: PropTypes.string,
      fontSize: PropTypes.number, 
  	  //props가 필수적으로 있어야 한다고 표시하고 싶으면 뒤에 .isRequired를 붙여준다.
    };

useEffect

useEffect()함수는 React component가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 리액트 Hook이다.
1. useEffect import방법

import {useEffect} from ‘react’

2. useEffect의 형태

useEffect(function, dependency);

dependency는 배열형태이며, function을 실행시킬 조건으로 받아들이면 된다.
dependency 자체를 생략할 수도 있는데, 이러한 경우는 해당 컴포넌트가 렌더링될 때마다 useEffect를 실행시키도록 설정하는 것이다.

let something = 2;
useEffect(() => {/*실행내용*/}, [something]);

위와 같이 대괄호 안에 변수를 넣으면 그 값이 바뀔 때마다 useEffect가 실행되게 설정할 수 있다.

대괄호를 비워두는 경우에는 초기에, 즉 처음으로 마운트 되었을 때 한 번만 실행시키도록 설정하는 것이다.

3. cleanup()함수

useEffect(() => {
  //실행할 내용들
  return () => {
    //cleanup함수
  }, []);

useEffect에는 해당 컴포넌트가 언마운트될 때 실행되는 cleanup함수라는 기능이 있다.
cleanup함수는 컴포넌트가 사라질 때 호출되는 부분으로 메모리 누수를 방지하여 메모리를 관리하거나 컴포넌트가 사라질 때, 수행할 작업들을 추가하기 위해 사용한다.