[React] ReactJS로 영화 웹 서비스 만들기 (STATE #1)

728x90

* 노마드코더 강의 정리 글 입니다.

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

React for Beginners

nomadcoders.co

STATE 1

- 이전 강의에 이어서 계속

- 버튼을 누르면 숫자가 카운트 되는 프로그램을 만드는 중

1. React.js (리렌더링 하는 방법)

- 우리한테 어떤게 필요하고, 어떤걸 해야하는지 이해하기 위해 안 좋은 방법부터 시작

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">

        const root = document.getElementById("root");

        let counter = 0;

        function countUp() {
            counter = counter + 1;
        }

        const Container = () => (
            <div>
                <h3>Total clicks : {counter}</h3>
                <button onClick = {countUp}>Click me</button>
            </div>
        );

        ReactDOM.render(<Container />, root);
        
    </script>
    
</html>

- 이렇게 코드를 짜고 실행하게 되면

실제로 counter의 값은 증가하지만 UI가 업데이트 되지 않아 0으로 보인다.

(이유는 컴포넌트를 단 한 번만 렌더링 하고 있기 때문)

- 동작을 살펴보면,

1. 어플리케이션 실행 ➔ 페이지 로드

2. countUp(), Container()는 함수이기 때문에 바로 실행되지 않고

ReactDOM.render(<Container />, root); 라인이 실행됨

(이 때 counter는 0이기 때문에 0을 로드한다)

3. 버튼을 누르면 counter를 1씩 증가 시킨다.

4. countUp() 함수가 동작하고 나면,

리렌더링이 필요한데 어디에도 하는 곳이 없다.

function countUp() {
    counter = counter + 1;
    render();
}

function render() {
    ReactDOM.render(<Container />, root);
}

- render()이라는 함수를 만들고, countUp()에서 실행 시켜주도록 수정하였다.

- 이제 정상적으로 동작하지만 이 방법은 다른 함수가 추가되면,

거기서도 계속 render를 해주어야하므로 좋은 방법은 아니다.

📌 우선 이렇게만 해보고 버튼을 눌러보면 JS와 React는 노드 변경 처리 과정이 다르다는 걸 알 수 있음.

(설명은 강의 코멘트 참고 - soonseok님)

* JS에서 버튼 클릭 *

* Vanilla JavaScript는 DOM변경을 직접 처리한다.

DOM 변경이 발생하면, 브라우저는 변경된 DOM 트리를 다시 계산하고,

렌더 트리를 다시 생성한 후 화면에 그린다.

이 과정은 비용이 많이 드는 연산으로, 자주 발생하게 되면 성능이 저하될 수 있다.

* React에서 버튼 클릭 *

* ReactJS는 DOM 변경을 처리하기 위해 가상 DOM(Virtual DOM)이라는 개념을 도입한다.

상태 변경이 발생할 때마다 새로운 가상 DOM 트리를 생성하고,

이전의 가상 DOM 트리와 비교하여 변경된 부분을 파악한다.

이렇게 파악도니 변경 사항만 실제 DOM에 반영하는 방식을 사용한다.

가상 DOM을 사용함으로써, 변경이 필요한 최소한의 요소만 실제 DOM에 반영되기 때문에

불필요한 연산을 줄이고 성능을 향상시킬 수 있다.

2. React.JS (useState 사용)

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">

        const root = document.getElementById("root");
        
        const App = () => {
            const [counter, setCounter] = React.useState(0);
            const onClick = () => {
                setCounter(counter + 1);
            }
            return (
                <div>
                    <h3>Total clicks : {counter}</h3>
                    <button onClick={onClick}>Click me</button>
                </div>
            )
        };

        ReactDOM.render(<App />, root);

    </script>
    
</html>

- useState를 사용하면 상태값이 변경됐을 때 해당 컴포넌트를 리렌더링하고 변경된 상태가 화면에 반영됨.

📌 useState

const data = React.useState(0);
console.log(data);

* useState는 컴포넌트 내에서 상태를 추가하고 관리하기 위한 Hook이다.

* console을 보면 useState에 초기값과 값을 바꾸는 함수가 있는 것을 확인할 수 있다.

data의 값을 출력하기 위해서 data[0] 으로 표현할 수 있으며, 함수를 출력할 땐 data[1] 로 표현할 수 있다.

* 매번 data[0], data[1] 로 꺼내는 것 보다는 변수에 할당하여 꺼내주는게 좋은 방법일 것이다.

그래서 state를 사용할 때는 아래처럼 사용한다.

const [counter, setCounter] = React.useState(0);

* 아래는 구조 분해 할당 문법 예시이다.

const numbers = [1,2,3];

console.log(numbers[0]) // 1

console.log(numbers[1]) // 2

console.log(numbers[2]) // 3

const [a,b,c] = numbers;

console.log(a) // 1

console.log(b) // 2

console.log(c) // 3

다음 강의에 계속!

저작자표시 비영리 변경금지

'IT > React' 카테고리의 다른 글

[한입 크기로 잘라 먹는 리액트] - React.js 입문 2 (1)	2024.11.22
[한입 크기로 잘라 먹는 리액트] - React.js 입문 1 (1)	2024.11.19
[한입 크기로 잘라 먹는 리액트] - React.js 개론 (1)	2024.11.15
[한입 크기로 잘라 먹는 리액트] - Node.js 기초 (5)	2024.11.01
[React] ReactJS로 영화 웹 서비스 만들기 (The BASICS OF REACT) (0)	2024.02.21

YeonBu's Archive 💜

[React] ReactJS로 영화 웹 서비스 만들기 (STATE #1)

STATE 1

'IT > React' 카테고리의 다른 글

티스토리툴바

[React] ReactJS로 영화 웹 서비스 만들기 (STATE #1)

STATE 1

'IT > React' 카테고리의 다른 글

관련글

티스토리툴바