리액트 - 3️⃣ (feat. 리액트를 다루는 기술)

기본서를 바탕으로 수업시간에 배웠던 내용을 포함하여 다루지 않았던 내용 중 정리가 필요하다고 생각하는 개념을 정리합니다

📍virtual DOM

DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행

리액트와 virtual DOM이 제공하는 것은 업데이트 처리의 간결성으로
UI를 업데이트하는 과정에서 생기는 복잡함을 모두 해소하고, 더욱 쉽게 업데이트에 접근할 수 있다

import React from 'react';

- 리액트 프로젝트 생성시 node_dodules라는 폴더도 함께 생성되는 데 해당 폴더 내에 'react 모듈'이 설치됨
- 'react 모듈'을 import 구문을 통해 불러와서 사용
- 모듈을 불러와서 사용하는 것은 '브라우저' 자체에는 없는 기능으로 브라우저가 아닌 다른 환경에서 자바스크립트를 실행시켜주는 Node.js에서 지원해주는 기능임
➡️ nodejs의 require와 같은 개념

📍번들러(bundler)

: 번들(bundle) ; 묶는다 ( 번들 과자)
- 브라우저에서 사용할 수 없었던 기능을 사용하기 위해 사용
- 대표적인 번들러로 webpack, Parcel, browserify가 있음
▪️ webpack : 편의성과 확장성이 다른 도구보다 뛰어남
- 번들로 도구를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해주며 최적화 과정에서 여러 개의 파일로 분리될 수 도 있음
- css, svg 등도 불러와서 사용할 수 있음

📍loader

: 파일들을 불러오는 것은 웹팩의 (loader)라는 기능이 담당함

sass-loader이니깐 sass파일을 불러올 수 있게 해주는 로더


babel-loader
: 최신 자바스크립트 문법으로 작성된 코드를 바벨을 사용하여 ES5문법으로 변환해줌
➡️ 구버전 웹 브라우저와 호환하기 위해서 변환해줌

function App () {
	return (
    	<div>
        	HEllo <b> react </b>
        </div>
    );
}


function App() {
	return React.creatElement("div", null, "hello", React.createElement("b", null, "react"));
}

📍ReactDOM.render

- 컴포넌트를 페이지에 렌더링하는 역할을 하며, react-dom 모듈을 불러와 사용할 수 있음

* 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 꼭 감싸주어야 할까 ?

-Virtaul DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있기 때문


-props 는 고정적이고 state는 가변적이다
하지만 props로 state값을 넘겨준다면 유동적으로 props의 값을 바꾸어 전달해 줄 수 있다

📍리액트의 이벤트 시스템

- 이벤트 이름은 카멜 표기법으로 작성
- 이벤트를 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달
: HTML 에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달

📍컴포넌트 반복

◼️ arr.map(callback, [thisArg])

callback - 새로운 배열의 요소를 생성하는 함수.
- currentValue : 현재 처리하고 있는 요소
- index : 현재 처리하고 있는 요소의 index 값
- array : 현재 처리하고 있는 원본 배열
thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스

◼️ key

: 컴포넌트 배열을 렌더링 할 때 어떤 원소에 변동이 있었는지 알아내기 위해 사용

◼️filter

import {useState} form 'react';

const Counter = () => {
	const[vale, setValue] = useState(0)
    
    return (
     ///
    );
}

: 불변성을 유지하면서 배열의 특정 항목을 지울 때 사용하는 배열의 내장함수를 사용

📍Hooks

◼️ useState

: 가장 기본적인 Hook
- 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줌

import {useState} from 'react';

const Counter = () =>{

	const [value, setValue] = useState(0);
    
    return (
    	///
    );
}

- 하나의 상태값만 관리할 수 있음
- 컴포넌트에서 관리해야 할 상태가 여러개라면 useState를 여러 번 사용하면 됨

◼️ useEffect

import {useState, useEffect} from 'react';

const Info = () => {
	const [name, setName] = useState('');
    const [nickname, setNickname] = useState('');
    
    useEffect(()=> {
    	console.log('렌더링 완료');
   }, [name]);  //name이 변경될때만 실행   
   
   ////
}

- 마운트될 때만 실행하고 싶을 때 ( 화면에 맨 처음 렌더링 될 때만 실행하고, 업데이트 될 때는 실행하지 않게 함)
➡️ useEffect의 두 번째 파라미터로 [] (빈 배열) 을 추가

- 특정 값이 업데이트 될 때만 실행하고 싶을 때
➡️ 배열[] 에 검사하고 싶은 값을 추가

◼️useReducer

- useState보다 더 다양한 컴포넌트 상황에 따라 여러 종류의 상태를 다른 값으로 업데이트 해주고 싶을 때 사용

리듀서
: 현재 상태, 업데이트를 위해 필요한 정보를 담은 (action) 값을 전달받아 새로운 상태를 반환하는 함수
- 새로운 상태를 만들 때는 반드시 불변성을 지켜야 함

function reducer(state, action) {
	return { ... };
}


//액션 값

{
	type : 'INCREMENT',
    //그 외 필요한 값   
}

useReducer는 사용하는 액션 객체가 반드시 type을 지닐 필요가 없음 + 객체가 아니라 문자열이나 숫자여도 됨

const [state, dispatch] = useReducer(render, { value : 0 });
// 리듀서 함수 , 해당 리듀서의 기본값

- state : 현재 가리키고 있는 상태
- dispatch : 액션을 발생시키는 함수 ( dispatch(action) 같은 느낌)
➡️ 함수 안에 파라미터로 액션 값을 넣어주면 리듀서 함수가 호출되는 구조

* 장점

- 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다

◼️ useMemo

: 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있음
➡️ 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용함
: ex. 인풋창에 내용이 하나하나 들어올 때 마다 렌더링 되는 것이 아니라 입력이 끝나면 렌더링 되는 것

const avg = useMemo(() => getAverage(list), [list]);
//바뀌었을 때 실행할 연산, [바뀌는 값]

◼️ useCallback

- useMemo와 거의 비슷. 렌더링 성능을 최적화해야하는 상황에서 사용
ex. 컴포넌트가 리렌더링될 때마다 함수들도 새로 생성되므로 이를 최적화 해주는 것
➡️ useCallback은 결국 useMemo로 함수를 반환하는 상황에서 더 편하게 사용할 수 있는 HOOK

//useCallback(생성하고 싶은 함수, 배열)

const OnInsert = useCallback(()=>{
const nextList = list.concat(parseInt(number));
setList(nextList);
setNumber('');
}, [number, list]; //number 혹은 list가 바뀌었을 때만 함수 생성

숫자, 문자열, 객체 [일반값]	함수
useMemo	useCallback

** Ref(reference)

: HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법
* 특정 DOM에 작업을 해야할 때.즉, DOM을 꼭 직접적으로 건드려야 할 때 ref를 사용

◼️ useRef

: 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해주는 hook
- 컴포넌트 로컬 변수(렌더링과 상관없이 바뀔 수 있는 값)를 사용해야 할 때 활용함
➡️ ref 안의 값이 바뀌어도 컴포넌트가 렌더링 되지 않음

📍 styled-component

◼️Tagged 템플릿 리터럴

: 문자열에 스타일 정보를 넣어줄 때 사용 ( ``) 백틱 활용
➡️ styled-component 사용시 이용
: 템플릿 사이사이에 들어가는 자바스크립트 객체나 함수의 원본 값을 그대로 추출할 수 있음






참고자료:
리액트를 다루는 기술