ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [React] React란 무엇인가?
      React 2024. 1. 29. 18:06

      React의 특징

      • 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리로, Javascript를 기반으로 함.
      • JSX(JavaScript XML) 문법 사용.
      • 가상 돔(Virtual DOM)을 사용하여 UI렌더링을 최적화.
      • 단방향 데이터 바인딩의 특성.
      • 선언형 프로그래밍
      • 컴포넌트 기반의 UI관리.

       

       

      그렇다면 지금부터 위에서 설명한 React의 특징을 하나씩 살펴보자.



      JSX(JavaScript XML)
      • HTML 요소에 유효한 자바스크립트 객체를 내장할 수 있는 자바스크립트 확장이다.
      • Vanilla JS에서는 html과 script를 나누어서 작성했지만,
        React환경에서는 자바스크립트에서 HTML을 작성할 수 있도록 해주는 것이 큰 장점
      📌XML이란
      eXtensibla Markup Language로, HTML과 같은 마크업 언어
      HTML은 데이터를 표현하는 언어라면, XML은 데이터를 기술하는 언어

       

      <!DOCTYPE html>
<html>
  <body>
    <span>몇 번 눌렀니? 0</span>
    <button id="btn">클릭</button>
  </body>
  <script>
    const button = document.getElementById('btn');
    const span = document.querySelector('span');
    let counter = 0;
    function handleClick() {
      console.log('클릭 됨');
      counter = counter + 1;
      span.innerText = `몇 번 눌렀니? ${counter}`;
    }
    button.addEventListener('click', handleClick);
  </script>
</html>

      html로 작성한 페이지

      import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <span>몇 번 눌렸니? {count}</span>
      <button onClick={handleClick}>클릭</button>
    </div>
  );
}

export default App;

      JSX문법으로 작성한 페이지

       

      가상 돔(Virtual DOM)

      • 현재 대부분의 웹 사이트가 SPA(Single Page Application)방식을 채택하고 있음.
        페이지 전체를 다시 로드하는 것이 아니라 필요한 부분만 Javascript코드에 의해 업데이트되므로 사용자 입장에서는 빠른 상호작용과 부드러운 페이지 전환이 가능해지는데, React에서는 Virtual DOM이 바로 이 역할을 수행.
      • 브라우저의 렌더링 과정을 잠깐 살펴본 적이 있었는데, React는 이 과정에서 리플로우와 리페인트가 자주 수행되는 문제를 해결하기 위해 Virtual DOM을 사용.
      • 메모리 상에 사용자가 보고 있는 DOM과 동일한 가상의 DOM을 만들고, DOM 조작이 발생하면 가상 DOM에서 연산을 수행한 후 실제 DOM과 비교하여 UI을 업데이트하는 방식을 통해 리플로우와 리페인트 연산을 최소화.

       

       

      단방향 데이터 바인딩
      • React에서는 부모 컴포넌트 → 자식 컴포넌트 방향으로만 데이터 바인딩이 가능
      • 디버깅 용이성 : 컴포넌트의 흐름이 예측 가능하기 때문에 디버깅이 쉬워짐
      • 컴포넌트 독립성 : 자식 컴포넌트는 부모로부터 전달받은 props를 통해서 데이터에 접근 가능하지만, 수정은 불가능 
        → 컴포넌트 간의 결합도를 낯추고 재사용성을 향상시킴
      📌 데이터 바인딩이란
      화면상에 보이는 데이터(View)와 브라우저의 메모리에 있는 데이터(Model)를 묶어서 동기화하는 것

      단방향 vs 양방향

      • 단방향 데이터 바인딩
        • React의 데이터 바인딩 방식
        • Javascript(Model) → HTML(View)의 방향으로만 데이터를 동기화하는 것을 의미
        • 부모 컴포넌트에서 하위 컴포넌트로만 데이터가 전달(Props를 통해)되는 구조
        • HTML(View) → Javascript(Model)로의 직접적인 데이터 갱신은 불가능하므로
          이벤트 함수(onClick, onChange 등)를 이용하여 Javascript를 통해 HTML을 변경해야함
      import React, { useState } from 'react';

function App() {
  const [data, setData] = useState('');

  // 데이터 바인딩
  const bindData = (event) => {
    setData(event.target.value);
  };

  return (
    <div className="App">
      <input type="text" value={data} onChange={bindData} />
      <div>입력한 텍스트 : {data}</div>
    </div>
  );
}

export default App;

      리액트에서의 데이터 바인딩

      • 양방향 데이터 바인딩
        • Vue.js, Angular의 데이터 바인딩 방식
        • Javscript(Model)와 HTML(View)사이에 ViewModel이 존재
          둘 중 하나만 변경되어도 ViewModel이 동시에 동기화해줌
        • 부모 컴포넌트에서 자식 컴포넌트로는 Props를 통해 데이터를 전달
          자식 컴포넌트에서 부모 컴포넌트로는 Emit Event를 통해 데이터를 전달
      <template>
  <div>
  	<!-- v-model(ViewModel)이 양방향 데이터 바인딩을 수행 -->
    <input type="text" v-model="data">
    <p>입력한 텍스트 : {{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: ''
    };
  }
};
</script>

      Vue.js에서의 데이터 바인딩

       

       

      선언형 프로그래밍
      • React에서는 DOM API와 관련된 코드가 추상화되어있기 때문에,
        개발자들은 html이 어떻게(How) 동작하는지보다, 무엇(What)을 작성해야 할지에 더 집중할 수 있다.
      • 관리해야할 변수가 줄어들어 유지보수 및 가독성이 좋고, 디버깅이 쉽다.

      React 공식 문서에 보면 이렇게 써있다..

      📌 명령형 프로그래밍 vs. 선언형 프로그래밍
      명령형 프로그래밍은 어떻게(How) 나타내는지 관심
      선언형 프로그래밍은 무엇(What)을 나타내는지에 관심

      ?????솔직히 무슨 말인지 잘 모르겠다.

      예시를 통해 알아보자

      • Vanilla Javascript와 React로 예시를 만들어 비교해보자.
      <!DOCTYPE html>
<html>
    <body>
    <ul id=”list”></ul>
    </body>
    <script>
    	// Vanilla JS에서는 어떻게(How)에 집중해보자.
        var arr = [1, 2, 3, 4, 5]
        
        // 일단 html에서 ul태그를 선택하고..
        var elem = document.querySelector("#list");
        
        // arr을 순회하면서
        for(var i = 0; i < arr.length; i ++) {
        
            // 리스트의 요소를 또 하나하나씩 만들고
            var child = document.createElement("li");
            
            // 요소의 값에 데이터를 할당하고
            child.innerHTML = arr[i];
            
            // 완성된 리스트 요소를 ul태그 내부에 집어넣는다
            elem.appendChild(child);
    	}
    </script>
</html>

      바닐라 자바스크립트로 작성한 코드

       

      import React, { useState } from 'react';

// 리액트에서는 무엇(What)을 나타내는지에 집중해보자.

function App() {
	
    const [arr, setArr] = useState([1, 2, 3, 4, 5]);
    
    // html상에서 목록이 이렇게 생겼고
    // JSX문법은 html태그와 javscript문법을 동시에 쓸 수 있으니..
    // ul태그 내부에 li태그를 map함수로 집어넣으면 되겠네?
    return (
        <ul>
            {arr.map((index, elem) => (
                <li key={index}>{elem}</li>
            ))}
        </ul>
    );
}

export default App;

      리액트로 작성한 코드

       

      솔직히 이렇게 해보고 나서도 How와 What의 차이?를 모르겠다..
      하지만 확실한 차이점은,
      React에서는 html의 요소를 선택하거나 생성할 필요가 없다는 것

       

       

      컴포넌트 기반의 UI관리
      • UI를 개발할 때, 컴포넌트라고 부르는 단위로 코드를 작성하여 관리함
      • 컴포넌트는 재사용이 가능하며, 재사용을 통해 생산성과 유지보수성이 향상됨

      const Header = () => {
  return <h1>헤더 입니다.</h1>;
};

const Footer = () => {
  return <h2>푸터 입니다.</h2>;
};

function App() {
  return (
    <div>
      <Header />
      <div>내용</div>
      <button>버튼</button>
      <Footer />
    </div>
  );
}

export default App;

      'React' 카테고리의 다른 글

      [React] Hooks  (0) 2024.03.08
      [React] React의 장단점  (0) 2024.01.31

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바