본문 바로가기
웹공부/React

React 공부 1일차

블랙판돌 2023. 8. 4. 20:21

*환경 설정

1) react, react-dom src script에 복붙해넣기

2) 개발자도구 - console창 가서 React 설치됐는지 확인(React치고 enter 눌러보기)

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script>
        const root = document.getElementById("root");
        //property(id, style, eventListener etc...)에서 바로 event 등록 가능
        const h3 = React.createElement("h3",
        {
            //on+${event}
            onMouseEnter: () => console.log("mouse enter")
        },
        "Hello, I am a span!");
        //const name = React.createElement(html element 이름, {properties}, contents);
        const btn = React.createElement("button",
        {
            onClick: () => console.log("I'm clicked!")
        }
        , "Click me");
        const container = React.createElement("div", null, [h3, btn]);
        //render: React element를 가지고 HTML로 만들어 배치한다.
        ReactDOM.render(container, root);// span, button을 root 안에 넣음.
    </script>
</html>

-react dom: 생성한 element를 HTML로 변경

-props 안에서 event listener를 등록할 수 있음. JS에서 addEventListener를 계속 해야하는 걸 줄여줌.

=>{on+${event_name}: () => console.log()}

 

 //const name = React.createElement(html element 이름, {properties}, contents);

----------------------------------------------------------------------------------------------------------------------

앞으로 React에선,

JSX(JS를 확장한 문법)을 사용. 위에건 REACT 입문차원에서 만들어본 코드.

SX 코드를 browser에서 이해할 수 있는 코드로 변환해주는 추가적 환경설정이 필요함.

=>Babel standalone

 

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script type = "text/babel">
        const root = document.getElementById("root");
        let counter = 0;
        function countUp(){
            counter += 1;
            render();
        }
        function render(){
            ReactDOM.render(<Container />, root);
        }
        const Container = () => (
            <div>
                <h3>Total clicks : {counter}</h3>
                <button onClick={countUp}>Click here</button>
            </div>
        );
       
        //render: React element를 가지고 HTML로 만들어 배치한다.
        render();// span, button을 root 안에 넣음.
    </script>
</html>

Q. ReactJS가 훌륭한 이유?

1. Vanilla JavaScript
Vanilla JavaScript에서는 DOM 변경을 직접 처리. 즉, 필요한 DOM 요소를 직접 선택하고, 요소의 속성을 변경하거나 새로운 요소를 추가하거나 기존 요소를 제거하는 등의 작업을 직접 수행한다. 
DOM 변경이 발생하면, 브라우저는 변경된 DOM 트리를 다시 계산하고, 렌더 트리를 다시 생성한 후 화면에 그린다. (비용이 많이 드는 연산->자주 발생하게 되면 성능을 저하시킬 수 있음.)

2. ReactJS
ReactJS는 DOM 변경을 처리하기 위해 가상 DOM(Virtual DOM) 개념을 도입. ReactJS에서는 먼저 메모리에 가상 DOM 트리를 생성(실제 DOM 트리의 사본으로서, 실제 DOM 트리와 별도로 존재)
ReactJS는 상태 변경이 발생할 때마다 새로운 가상 DOM 트리를 생성하고, 이전의 가상 DOM 트리와 비교하여 변경된 부분을 파악-> 이렇게 파악된 변경 사항만 실제 DOM에 반영하는 방식(  '재조정(Reconciliation)' 또는 'Diffing' )
가상 DOM을 사용함으로써, 변경이 필요한 최소한의 요소만 실제 DOM에 반영되기 때문에 불필요한 연산을 줄이고 성능을 향상시킬 수 있음.

 

한 줄 요약: 리액트는 가상돔을 써서 우리 시야에 보이는 부분만 수정해서 보여주고 모든 업뎃이 끝나면 일괄로 합쳐서 실제 돔에 던져준다. -> 비용 감소

 

-----------------------------------------------------------------------------------------------------------------------------------------------------

rendering에 관한 글

https://pozafly.github.io/react/declarative-meaning-of-react-rendering-process/#Trigger

 

React 렌더링과정으로 알아보는 선언적이라는 의미

React는 개발자에게 코드를 선언적으로 작성하도록 한다. 이것을 렌더링 과정과 ErrorBoundary를 통해 알아보자.

pozafly.github.io

state가 바뀌면 rendering이 일어난다. 즉, ReactJS는 componenet를 refresh 해준다.

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script type = "text/babel">
        const root = document.getElementById("root");

        function App(){
            const [counter, setCounter] = React.useState(0);
            const onClick = () => {
                setCounter(counter + 1);
            }
            return (
                <div>
                    <h3>Total clicks: {counter}</h3>
                    <button onClick={onClick}>Click here</button>
                </div>
            )
        }
        ReactDOM.render(<App />, root);
    </script>
</html>

*const [counter, setCounter] = React.useState();
React.useState() 는 react기능을 쓸 수있게 해주는 하나의 도구이고,
counter는 현재의 값(state) 이며,
setCounter은 이벤트 발생시 변화를 주는 부분이어서 이후 counter로 다시 저장된다.
React.js는 매번 자동으로 Rerendering해준다.
+) 실제 변경되는 값만 판단해서 불필요한 리렌더링을 제외한 채로 효율적으로 동작한다.

'웹공부 > React' 카테고리의 다른 글

React 공부 6일차  (0) 2023.08.17
React 공부 5일차  (0) 2023.08.15
React 공부 4일차  (0) 2023.08.13
React 공부 3일차  (0) 2023.08.11
React 공부 2일차  (0) 2023.08.06

'웹공부/React' Related Articles

티스토리툴바