React

Facebook에서 개발된 오픈소스 라이브러리이며

CSR 웹페이지를 개발할 때 주로 사용된다. 컴포넌트 단위로

개발할 수 있어 유지보수, UI 재사용성을 높여 효과적으로 웹페이지를

개발, 운영할 수 있다.

React의 주요 특징

1. Virtual DOM, 동적인 웹페이지 구성

React는 메모리에 Virtual DOM(가상돔)을 생성하고 이를 활용하여 이벤트가 발생할 때 마다 실제 DOM과 상태를 비교하여 변경이 필요한 최소한의 변경 사항만 실제 DOM에 반영하여 렌더링되기 때문에 렌더링 효율성이 좋다. 이러한 특징으로 유저와 상호작용하는 동적인 웹페이지 개발 시 자주 채택된다.

2. Data Flow

Data Flow(데이터 방향)는 한 방향으로 흐르는 단방향이다. 데이터흐름이 양방향인 경우 어플리케이션의 규모가 커질 수록 데이터의 흐름을 추적하기 힘들고 복잡해지는 경우가 발생한다. 이와 달리 단방향으로 개발된 어플리케이션은 데이터를 추적하기 수월하고 변화에 대한 예측이 가능하여 디버깅이 쉬운 장점이 있다.

3. JSX를 활용한 컴포넌트 개발

React를 사용할 때 필수적인 요소는 아니지만 보편적으로 필수적 요소처럼 사용되고 있다. 개인적인 견해로 JSX를 활용하였을 때 가장 큰 장점으로는 "개발의 생산성의 증대"라고 생각한다. JS코드내에서 즉시 UI구현 작업이 가능하고 가독성 또한 좋아지기 때문이다.

4. Props & State

Props는 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 의미하며 readonly 타입의 데이터이다. props는 변경이 불가능한 불변데이터이고 props를 전달해 준 최상위 부모 컴포넌트에서만 props를 변경할 수 있다.

State는 컴포넌트 내부에서 선언하여 값을 변경할 수 있어 동적인 데이터를 다룰 때 주로 사용된다. 사용자와 상호작용을 통해 데이터를 동적으로 변경할 때 사용되며 각각의 state는 독립적인 데이터이다.

5. Hooks

React가 함수형 컴포넌트를 표준으로 제공하면서 생긴 개념으로, React state와 Life cycle을 연동할 수 있게 해주는 함수를 뜻한다. 대표적으로 useState, useEffect, useCallback, useMemo 등이 있다.

마치며...

지금 껏 개발에 대한 포스팅을 해오며 돌이켜 생각해보면 react훅을 제외하면 나의 주력인 react에 관한 포스팅이 단 하나도 없다는 것이 조금 놀라웠다. 기술에 대한 이론적 역량을 보완하기 위해 react의 개념을 복기하며 포스팅하였고 알고 있더라도 포스팅을 하고 안하고의 차이는 꽤 크니 앞으로 꾸준히 노력하며 포스팅해야겠다.

# useScroll의 기능

import {useEffect, useState} from "react";

export const useScroll = () => {
    const [state, setState] = useState({
        x: 0,
        y: 0
    });
    const onScroll = () => {
        setState({ y: window.scrollY, x: window.screenX });
    };
    useEffect(() => {
        window.addEventListener("scroll", onScroll);
        return () => window.removeEventListener("scroll", onScroll);
    }, []);
    return state;
};

useScroll은 스크롤의 위치를 감지하여 확인할 수 있는 hook이다.

반환값은 { x : 0(위치) , y : 0(위치) }로 각 스크롤의 x와 y값을 반환한다.

# 설명

const [state, setState] = useState({
    x: 0,
    y: 0
});

useState를 사용해서 객체리터럴 x와 y를 만들고 x에는 x좌표의 스크롤위치와

y에는 y좌표 스크롤 위치를 불러올 것이다.

const onScroll = () => {
    setState({ y: window.scrollY, x: window.screenX });
};

onScroll함수를 만들어주고 setState에 y = y스크롤위치, x = x스크롤위치를 넣어주는 기능을 넣어준다.

useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
}, []);
return state;

useEffect를 사용하여 이벤트 리스너를 걸어준다.

window에서 스크롤되면 onScroll함수를 실행시킨다.

스크롤이 될때마다 onScroll가 실행되고 onScroll 내부에서는 setState를 변환시켜주기 때문에

state의 값을 계속해서 re-render를 시켜준다.

그리고 컴포넌트가 보이지 않을때는 이벤트를 삭제 해준다.

# 사용예시

 const { y } = useScroll();

 <div className="App" style={{ height: "1000vh" }}>
     <h1 style={{ position: "fixed", color: y > 100 ? "red" : "blue" }}>hi</h1>
 </div>

구조분해할당을 사용하여 useScroll에서 y를 가져온다.

이 후에 style.color에 y가 100보다 크면 "red" 색상이 되고, 적으면 "blue"색상이 되도록 만들었다.

결과 : 스크롤을 내리면 red가 되고 가장위로 올리면 blue가 된다.

# useNetwork의 기능

import {useEffect, useState} from "react";

export const useNetwork = (onChange) => {
    const [status, setStatus] = useState(navigator.onLine);
    const handleChange = () => {
        if (typeof onChange === "function") {
            onChange(navigator.onLine);
        }
        setStatus(navigator.onLine);
    };
    useEffect(() => {
        window.addEventListener("online", handleChange);
        window.addEventListener("offline", handleChange);

        return () => {
            window.removeEventListener("online", handleChange);
            window.removeEventListener("offline", handleChange);
        };
    }, []);
    return status;
};

useNetwork는 네트워크의 상태가 온라인인지 오프라인인지 확인할 수 있는 hook이다.

반환값은 boolean형이다. ( true = online && false = offline )

# 설명

const [status, setStatus] = useState(navigator.onLine);

useState의 디폴트값은 navigator.onLine 이다.

navigator는 브라우저에 대한 버전, 정보, 종류 등 여러속성을 가져올 수 있다.

이 후에 onLine으로 접근을 했기 때문에 onLine이면 ture, offLine이면 false를 반환한다.

const handleChange = () => {
    if (typeof onChange === "function") {    //onChange는 useNetwork의 Argument이다.
        onChange(navigator.onLine);
    }
    setStatus(navigator.onLine);
};

handleChange 함수를 만들어주고, 내용은 useNetwork의 Argument인 onChange가 함수일때

함수를 실행할 수 있도록 유효성검사를 거친 후에

setStatus함수를 통해서 status를 re-render 시켜주는 기능이다.

useEffect(() => {
    window.addEventListener("online", handleChange);
    window.addEventListener("offline", handleChange);

    return () => {
        window.removeEventListener("online", handleChange);
        window.removeEventListener("offline", handleChange);
    };
}, []);

return status; // useNetwork의 return값.

useEffect를 사용하여 window에 ( on / offLine 이벤트 )를 걸어주고 실행시킬 함수는 handleChange로 넣어준다.

컴포넌트가 실행되지 않을땐 이벤트를 삭제해주는 함수를 넣는다.

이 후 re-render된 status를 반환한다(true or false).

# 사용예시

 const handleNetworkChange = online => {
   console.log(online ? "We just went online" : "We are offline");
 };
 const onLine = useNetwork(handleNetworkChange);

 <h1>{onLine ? "Online" : "Offline"}</h1>

handleNetworkChange라는 새로운 변수를 만들어주고 해당속성에 직접 접근하기 위해서

매게변수 online 을 넣어준 후 콘솔로그를 만들어서 true일때와 false일때 반응하는 기능을 각각 넣어준다.

이 후에 onLine 이라는 새로운 변수를 만들고 useNetwork를 사용하고

전달인자에 handleNetworkChange함수를 넣어준다.

이렇게 되면 useNetwork는 status를 반환하고,

status는 boolean형으로 값을 반환하기 때문에

콘솔로그가 online일땐( true ) "We just went online" ,

offline일땐( false ) "We are offline" 로 찍히게 된다.

# useInput의 기능

import {useState} from "react";

export const useInput = (initialValue, validator) => {

    const [value, setValue] = useState(initialValue);
    
    const onChange = event => {
    
        const { target: {value} } = event;
        
        let willUpdate = true;
        
        if (typeof validator === "function") {
            willUpdate = validator(value);
        }
        if (willUpdate) {
            setValue(value);
        }
    };
    return {value, onChange};
}

react내에서 input을 사용하고자 할때 사용하는 함수(hook)이다.

인풋에 입력하는 값을 useState의 별도사용 없이 re-render시켜주는 hook이다.

사용법 :  useInput을 새로운 변수에 할당하고 컴포넌트에 넣어서 사용한다.

const inputArea = useInput("MR.", cantWord);
const cantWord = (value) => !value.includes("!");

<input placeholder="inputArea" {...inputArea} />

useInput의 첫번째 전달인자( Argument )는 해당 인풋의 초기값이 되고

두번째 전달인자는 Input의 유효성검사, 새로운 규칙의 함수를 넣을 수 있다.

현재 새로운 규칙  cantWord의 내용은 인풋안에 느낌표가 들어가면 펄스를 반환하여 re-render를 하지 않게 된다.

여기서 { ...inputArea } 는 inputArea의 모든 것을 언팩한다.

inputArea = useInput

즉 useInput의 return값인 { value, onChange }는 input의 속성이 된다.

# 설명

const inputArea = useInput("MR.", cantWord);
const cantWord = (value) => !value.includes("!");

<input placeholder="inputArea" {...inputArea} />

{ ...inputArea } 를 통해서 useInput의 반환값인 value와 onChange를 가져왔다.

onChange는 변화를 감지하는 이벤트이고 Javascript Vanilla 에서는 addEventListener("change", function) 와 같다.

리액트에서는 컴포넌트 속성내부에 넣는 것만으로도 이벤트가 실행된다.

onChange에 따로 전달인자를 정해주지 않았기 때문에

전달인자(Argument) = "해당함수가 실행되는 요소의 속성" 이 된다.

    const onChange = event => {
    
        const { target: {value} } = event;
        
        let willUpdate = true;
        
        if (typeof validator === "function") {
            willUpdate = validator(value);
        }
        if (willUpdate) {
            setValue(value);
        }
    };

그러므로 event는 input속성에 접근할 수 있는 인자가 되었고

구조분해 문법을 사용해서 event의 target: { value } 를 가져오고

이후에 쓰이는 value = "input내부의 적힌 값" 이 된다.

이후에 if문을 통해서 함수의 유효성을 검사 한 후, 함수가 맞으면

validator가 실행되고  willUpdate = validator(value) 가 됨으로 이 함수가 제대로 작동하게되면 true이고

useState의 리렌더 함수인 setValue가 실행되면 쓰는대로 글자가 적힌다.