React 공부한 내용 정리 [React란, 특징, 함수형컴포넌트, Hook]

React란?

facebook이 개발한 프론트엔드 라이브러리로, "컴포넌트" 라는 개념에 집중이 되어있다. SPA나 모바일 앱 개발 시 토대로 사용될 수 있음.

특징

1. Data Flow
2. Component 기반 구조
3. Virtual Dom
4. Props and State
5. JSX

1. Data Flow

React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다.

• Angular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐름을 추적하기가 힘들지만, 단방향 흐름은 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 해준다.

2. Component 기반 구조

• Component : 독립적인 단위의 소프트웨어 모듈 / 소프트웨어를 독립적인 하나의 부품으로 만드는 방법

React는 UI(View)를 여러 컴포넌트를 쪼개서 만든다. 한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성한다.

컴포넌트 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기가 상대적으로 쉽다. 코드를 반복해 입력할 필요 없이, 컴포넌트만 import해 사용하면 된다는 간편함이 있다.

 

3. Virtual DOM

DOM : Document Object Model의 약자로 html, xml, css 등을 트리구조로 인식하고, 데이터를 객체로 간주하고 관리한다.

React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있다.

• 이벤트가 발생할 때 마다 Virtual Dom을 만들고, 다시 그릴 때 마다 실제 DOM과 비교하고 전 후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있다.

4. Props and State

• Props Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다. 쉽게 읽기 전용 데이터이다. 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.
• State State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용함. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적이다.

5. JSX

Javascript를 확장한 문법으로, 리액트에서 생김새를 정의할 때 사용하는 문법이다.

return <div>안녕하세요</div>;

태그는 반드시 하나의 태그로 감싸져있어야함.

React에서 return()안에 부분이 JSX문법으로 작성되어야함.

함수형 React 생명주기

1. 생성(mounting)
2. 업데이트(updating)
3. 제거(unmounting)

https://velog.io/@sukong/REACT-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%9D%98-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0%EC%99%80-useEffect-Hook

React Hook

리액트 Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수이다.

Hook의 종류

1. useState
2. useEffect
3. useContext
4. useReducer
5. useCallback
6. useMemo
7. useRef
8. useImperativeHandle
9. useLayoutEffect
10. useDebugValue

이 중 가장 많이 활용되는 useState와 useEffect에 대해 알아보자

1. useState

동적으로 바뀌는 값을 관리할 때 사용, 상태 유지 값과 그 값을 갱신하는 함수를 반환

const [state, setState] = useState(initialState);

initialState는 초기 렌더링 시에만 사용되며 이후의 렌더링 시에는 이 값은 무시된다.

setState 함수는 state를 갱신할 때 사용

setState( newState );

2. useEffect

리액트 컴포넌트가 렌더링 될때마다 특정 작업(effect)을 실행할 수 있도록 하는 hook

컴포넌트가 mount, update, unmount됐을 때 작업을 처리할 수 있다.

또한 hook이 클래스 컴포넌트의 기능을 사용하기 위해 만들어진 것이므로, useEffect는 클래스 컴포넌트에서 사용하는 생명 주기 메소드의 네가지 메소드의 기능을 모두 수행한다. `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`, `getDerivedStateFromProps` 가 그 네가지의 메소드이다.

useEffect는 `useEffect(callBackFunc, dependencies)` 로 두개의 인자를 넣어 호출할 수 있다.

1️⃣ useEffect(callBackFunc);

• 1️⃣의 경우 렌더링이 될 때마다 (컴포넌트가 **마운트 된 후**, 컴포넌트가 **업데이트**되고 난 후, 컴포넌트가 **언마운트 되기 전**에) 실행이된다. 즉, 앞서 말한 생명주기 메소드의 네가지의 메소드를 모두 사용한 것과 마찬가지이다.

2️⃣ useEffect(callBackFunc, **[]**);

• 2️⃣의 경우 컴포넌트가 **최초 렌더링** 되었을 때만 실행이 된다. 즉, 생명주기 메소드의 `ComponentDidMount` 의 역할을 수행한다.

3️⃣ useEffect(callBackFunc, **[state1, state2]**);

• 3️⃣의 경우 **최초 렌더링** + **state1 또는 state2가 변경**되었을 때 실행이 된다. 즉, 생명주기 메소드의 `componentDidUpdate`, `getDerivedStateFromProps` 의 역할을 수행한다.

4️⃣ useEffect(()=>{ **return(() => func())** });

• 4️⃣useEffect는 clean-up이라고 표현하는 함수를 return할 수 있는데, clean-up함수(리턴하는 함수)를 활용해 컴포넌트가 Unmount될 때 정리하거나 unscribe 해야할 것을 처리한다. 즉, clean-up함수는 생명주기 메소드의 `componentWillUnmount`의 역할을 수행한다.

위의 네가지 형태로 useEffect를 호출할 수 있다.

useEffect() 사용 예시,

import React, { useState, useEffect } from 'react'
function MyComponent() {
    const [count, setCount] = useState(0);
    useEffect(()=>{
        document.title = `업데이트 횟수 : ${count}`
    })
    return <button onClick={()=>setCount(count+1)}>increase</button>
}

버튼을 클릭하면 count의 상태값이 1씩 증가하는 코드이다. 버튼을 클릭하면 다시 렌더링되고, useEffect훅에 입력된 함수가 호출된다.

effect 타이밍

useEffect로 전달된 함수는 `컴포넌트 렌더링 - 화면 업데이트 - useEffect실행` 순으로 실행이 된다. 즉, useEffect실행이 최초 렌더링 이후에 된다는 것을 유의하자.